在Vue中使用Echarts图表库Demo

1. 参考资源

• Echarts官方文档
• Vue-Echarts封装

2.引用原生的Echarts

Echarts5.x提供了基于npm引入的方式，因此我们只需要执行npm指令将可以将Echarts引入到我们的项目中去了

npm install echarts --save

将Echarts引入后我们对照着Echarts的 图例 就可以轻松实现一个图表展示Demo，比如我们要在Vue中显示一个饼状图就可以这样做：

<template>
  <div id="imageTableBox">
  </div>
</template>

<script>
<!--引入-->
import * as echarts from 'echarts/core';
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent
} from 'echarts/components';
import { PieChart } from 'echarts/charts';
import { LabelLayout } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
<!--装配-->
echarts.use([
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  PieChart,
  CanvasRenderer,
  LabelLayout
]);

export default {
  name: "Advertising",
  mounted() {
  <!--创建-->
    const chartDom = document.getElementById('imageTableBox');
    const myChart = echarts.init(chartDom);
    let option;

    option = {
      title: {
        text: 'Referer of a Website',
        subtext: 'Fake Data',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: '50%',
          data: [ // 根据业务替换成动态数据
            { value: 1048, name: 'Search Engine' },
            { value: 735, name: 'Direct' },
            { value: 580, name: 'Email' },
            { value: 484, name: 'Union Ads' },
            { value: 300, name: 'Video Ads' }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
    option && myChart.setOption(option);
  }
}
</script>

<style scoped>
#imageTableBox {
  width: 100vw;
  height: 100vh;
}
</style>

这样一个Echarts图标的编写出来了，So Easy

3. 注意点

• Echarts代码是比较原始的js那套操作，因此在Vue中使用Echarts必须对js有一定的了解并根据vue的特性自己动态去调整一下js代码才能在Vue中顺利使用Echarts图表库
• 更多图表案例自己按照着Echarts图例很容易就可以上手的