有勇气的牛排博客
☰

Vue引用echarts图表

有勇气的牛排 427 前端 2023-05-18 22:32:58

文章目录

1 安装/卸载

echarts官方文档：https://echarts.apache.org/zh/index.html

1.1 安装

安装最新版

npm install echarts --save

指定版本安装

npm install echarts@4.8.0 --save

1.2 卸载

npm uninstall echarts

2 引入

2.1 全局引入

V4

import echarts from 'echarts'

V5

import * as echarts from 'echarts'

2.2 按需引入

V4

 import echarts from 'echarts/lib/echarts'

V5

import * as echarts from 'echarts/lib/echarts'

3 实战

Test.vue

<template>
    <div>
        <div ref="new_user_day_lineChart" style="width: 400px; height: 400px; background-color: #ffffff; padding: 20px; border-radius: 20px;"></div>
    </div>
</template>

<script>
  let url = 'http://127.0.0.1/';

  import * as echarts from 'echarts'
  import {get} from "../http/api.js";
  import {lineChart_option, pie_option} from '../echarts/echarts_option.js'

  let a_day_list;
  let a_day_num_list;

  export default {
    name: "Test",
    mounted() {
      let that = this;

      // 新增用户 日统计 初始化
      that.new_user_day_lineChart = echarts.init(this.$refs.new_user_day_lineChart);

     get(url + '/bigdata_info', 'post', "").then(res => {
        console.log(res.data)

        a_day_list = res.data.a_day_list;
        a_day_num_list = res.data.a_day_num_list;

        // 新增用户 日统计
        that.new_user_day_lineChart.setOption(lineChart_option("新增用户", "日统计", u_day_list, "人", u_day_num_list, ['red']))
      })
    }
  }
</script>

echarts_option.js

/**
 * lineChart: 折线图
 * title: 标题
 * color: 折线颜色 ['red','blue']
 * */
export const lineChart_option = (title, subtitle, date_list, unit, num_list, color) => {
  let option = {
    title: {
      text: title,
      subtext: subtitle,
      left: 'center'
      // textStyle: {
      //   color: '#fff'
      // }
    },
    // 提示框
    tooltip: {
      trigger: 'axis'
    },
    // 图例
    // legend: {
    //   icon: 'circle',
    //   left: 'center',
    //   top: 0,
    //   data: ['好评', '一般', '差评']
    // },
    // 比例大小
    // 比例大小
    grid: {
      left: '3%',
      right: '12%',
      bottom: '3%',
      containLabel: true
    },
    // 工具栏
    toolbox: {
      feature: {
        saveAsImage: {
          type: 'png'
        },
        magicType: {
          type: ['line', 'bar', 'stack']
        }
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      // data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
      data: date_list
    },
    yAxis: {
      type: 'value',
      // 初始化 单位 (可以不填)
      axisLabel: {
        formatter: '{value} ' + unit
      },
      // axisPointer: {
      //   snap: true
      // }
      textStyle: {
        color: '#fff'
      }
    },
    series: [
      {
        name: '新增',
        type: 'line',
        // smooth: true, // 平滑曲线显示
        // data: [120, 132, 101, 134, 190, 230, 210, 201, 234, 290, 230, 210],
        data: num_list,
        smooth: true,
        // 取最大、小值
        markPoint: {
          data: [
            {type: 'max', name: 'Max'},
            {type: 'min', name: 'Min'}
          ]
        },
        // 取平均值
        markLine: {
          data: [{type: 'average', name: 'Avg'}]
        }
      }
    ],
    color: color //['red']
  }
  return option;
}

/**
 * lineChart: 饼图
 * color: ['red','blue']
 * */
export const pie_option = (num_json, color) => {
  let option = {
    title: {
      text: '文章占比',
      // subtext: 'Fake Data',
      left: 'center',
      top: 5
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: '55%',
        data: num_json,
        // data: [
        //   {value: 1048, name: 'Search Engine'}
        // ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ],
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'bottom'
      // left: 'left'
    },
    // 保存图片
    toolbox: {
      show: true,
      feature: {
        saveAsImage: {}
      }
    },
    color: color,
  };
  return option;
}

留言

专栏
文章
加入群聊
程序员兼职接单交流
编程交流