vue+echarts 数据可视化

echarts官网：点击跳转

npm安装

npm install echarts@5.2.0 --save

注意：

• 不要直接安装

  npm install echarts --save
  

  这样安装默认会安装最新版本，最新版本会有一些莫名其妙的bug，@5.2.0是前一个版本，5.2.0会稳定一些

引入echarts

main.js全局引入

//踩过坑 import echarts from 'echarts' 会报错
import * as echarts from 'echarts';

// 起别名
Vue.prototype.$echarts = echarts;

创建一个容器

<!-- 一个带宽高和id的div就可以了 
	 *注意需要设置宽高 不然图表显示不出来 -->
<div id="zhu" style="width: 100%;height: 400px;"></div>

初始化

//柱状图
getZhu() {
      let myEchart = this.$echarts.init(document.getElementById("zhu"));
      myEchart.setOption({
        xAxis: {  //x轴
            //  数据条目名称
          data: ['90分以上', '70分-90分', '及格', '不及格']
        },
        yAxis: {}, //y轴
        series: [
          {
            type: 'bar',    //图表类别: bar :柱状图
              //  值
            data: [8,15,36,19]
          }
        ]
      })
    }

调用初始化方法

//  *注意不要写在creatd()里  会出现dom元素未加载报错
//  推荐写在mounted()里
mounted() {
      this.getZhu()
  },

效果图：

折线图：

其他图表步骤大致相同，只有初始化的区别

折线图初始化：

将 series 中的 type 换成 line 就会绘制折线图

getZhe() {
      let myEchart = this.$echarts.init(document.getElementById("zhu"));
      myEchart.setOption({
        xAxis: {
          data: ['90分以上', '70分-90分', '及格', '不及格']
        },
        yAxis: {},
        series: [
          {
            data: [8, 15, 36, 19],
            type: 'line'    //图表类别: line :折线图
          }
        ]
      })
    },

效果图：

饼图：

饼图初始化：

getBin() {
      let myEchart = this.$echarts.init(document.getElementById("zhu"));
      myEchart.setOption({
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '第二学期期末成绩',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 8, name: '90分以上' },
              { value: 15, name: '70分-90分' },
              { value: 36, name: '及格' },
              { value: 19, name: '不及格' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
    },

效果图：

有更详细更高阶的需求可以查阅官方文档的应用篇和实例