在Vue项目中使用Echarts

在项目中，经常会需要可视化数据来帮助我们进行数据展示，使用图表进行数据展示，既美化了页面，也提升了用户的阅读体验。

Echarts原为百度团队开发(现已成为Apache的孵化产品)，今天博主就简单总结一下，在vue中使用Echarts的经验。

附Echarts网址链接：Documentation - Apache ECharts

Tip:由于Vue3博主还没学习完毕，本博客使用的Vue版本为Vue 2.6+

---

（一）、使用npm或者yarn下载Echarts包

npm i echarts --save

使用如上安装方法可能会因为版本原因导致一个问题
"export 'default' (imported as 'ECharts') was not found in 'echarts/lib/echarts.js'
如果使用上面的安装方法报错后，请尝试删除之后进行如下安装

npm i -E echarts@3.7.2 zrender@3.6.3

/*2020-12-01修改，由于echarts 3.0+无法使用dataset数据集，不利于多个系列共享一份数据，也不利于基于原始数据进行图表类型、系列的映射安排，建议更换安装版本为echarts4 以上*/

npm i -E echarts@4 zrender

（二）、在main.Js中引用

//导入包
import echarts from 'echarts'
//全局引用
Vue.prototype.$echarts = echarts

（三）、在Vue页面中使用

      1、在template中放置图表容器。

<template>
  <div id="chart">
    <div id="myChart" :style="{ width: '500px', height: '300px' }"></div>
  </div>
</template>

      2、在methords中定义图表绘制方法。

 methods: {
    //柱状图
    drawLine() {
      //基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        title: { text: "柱状图" },
        tooltip: {}, //鼠标移到柱状图显示详情
        xAxis: {// X轴数据
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        yAxis: {}, //y轴数据
        series: [ //系列，绘图的依据
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 100, 20],
          },
        ],
      });
    },
}

     3、在mounted中调用该方法渲染表格

 mounted() {
    this.drawLine();
  },

    4、运行项目，即可看到显示效果。修改对应的series数据，可以更换不同的图标样式

                                       

      （四）、具体的表格绘制以及其他事项教程详见官方教程Documentation - Apache ECharts