vue+echarts数据图表展示

1.安装Echarts

npm install Echarts --save

2.引入Echarts

在需要的页面import引入。我的例子是将图表创建成组件，最后在App.vue渲染出来。

 在components目录下创建文件Chart.vue，引入echarts包

import echarts from 'echarts'

3.使用

  ①添加容器，添加样式。

#chart_example{
    width: 60%;
    height: 600px;
    border: 2px solid rgba(224, 108, 108, 0.719);
    border-radius: 4px;
    margin: 10px auto;
  }

②定义组件渲染到dom

let myChart = echarts.init(document.getElementById('chart_example'));

③配置图表参数option。具体的都已经参照文档添加了注释

/**
       * 使用 option 来描述其对图表的各种需求，
       * 包括：有什么数据、要画什么图表、图表长什么样子、
       * 含有什么组件、组件能操作什么事情等等。简而言之，
       * option 表述了：数据、数据如何映射成图形、交互行为
       */
      let option = {
        backgroundColor: 'rgb(43,51,59)', // 背景颜色
        // color: ['rgb(181,127,133)', 'rgb(114,194,179)'], // 全局调色板
        /**
         * 组件component是echarts中的各种内容，xAixs(直角坐标系x轴),polar(极坐标系底板)。。。
         */
        tooltip : { // 提示框组件
          trigger: 'axis',
          axisPointer : { // 鼠标悬浮在柱状图上的样式
            type : 'shadow'
          }
        },
        legend: {
          textStyle: {
            color: 'white'
          }
        }, // 图表上方的图标实例 
        xAxis : [ // 直角坐标系x轴
          {
            type : 'category',
            data : this_.xData,
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: { // x轴的字体样式
              show: true,
              textStyle: {
                color: 'rgb(231,234,237)'
              }
            },
            splitLine: { // 控制网格线是否显示
              show: false,
              lineStyle: { // 轴线颜色
                color: 'red'
              }
            },
            axisLine: { // x轴线的颜色和宽度
              lineStyle: {
                color: 'rgb(231,234,237)',
                width: 3 // 坐标轴的宽度
              }
            }
          }
        ],
        yAxis : [ // 直角坐标系y轴
          {
            type : 'value',
            axisLabel: { // y轴字体样式
              show: true,
              color: 'rgb(231,234,237)'
            },
            // axisLine: { // y坐标轴
            //   lineStyle: {
            //     color: 'rgb(231,234,237)'
            //   }
            // },
            splitLine: { // y轴轴线
              show: true,
              color: 'rgb(231,234,237)'
            }
          }
        ],
        series : [ // 系列是指：一组数值以及他们映射成的图。
          {
            name:'产量', // 鼠标悬浮显示的文字
            type:'line', // 图表类型，折线line，柱状bar等
            data: this_.lineData, // 绑定数据
            color: 'rgb(255,234,169)' // 图像颜色
          },
          {
            name: '销量',
            type: 'bar', // 柱状图
            barWidth: '10%', // 柱状图的柱状宽度
            data: this_.barData, // 绑定数据
            color: 'rgb(13,188,121)' // 图像颜色
          },
          { // 饼图
            type: 'pie',
            center: ['65%', 60],
            radius: 35,
            top: 10, // 图形与顶部的距离
            // roseType: 'angle', // 南丁格尔图
            label: { // 标签样式
              textStyle: { // 标签文字样式
                color: 'rgb(231,234,237)'
              }
            },
            labelLine: { // 标签引导线样式
              lineStyle: {
                color: 'rgb(231,234,237)'
              }
            },
            color: ['rgb(132,175,232)', 'rgb(100,65,164)', 'rgb(255,231,147)', 'rgb(88,157,255)', 'rgb(249,203,220)'], // 扇形的调色板
            emphasis: { // 高亮的样式
              itemStyle: { // 高亮颜色
                color: 'rgb(13,188,121)'
              },
              label: { // 高亮时标签文字
                show: true, // 显示标签
                formatter: '这是高亮的标签'
              }
            },
            data: this_.pieData
          }
        ]
      };

④渲染图表

myChart.setOption(option);

⑤自动缩放

window.addEventListener('resize',function() {myChart.resize()});

⑥ 在App.vue引入组件

⑦效果图

 

4.Chart.vue完整代码