最新的echarts在vue中的简单使用

什么是echarts

ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。它遵循 Apache-2.0 开源协议，免费商用，且兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等）及兼容多种设备，可随时随地任性展示。

使用echarts

安装

npm install echarts --save

全局引入

写在main.js中

import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts

使用

新建节点容器

<div ref="echartLeftThree" class="echartLeftThree"></div>

初始化

echartLeftThree(){
     //2.初始化
     this.echartThree = this.$echarts.init(this.$refs.echartLeftThree);
     //3.配置数据

     let option = {
         xAxis: {
             type: 'category',
             data: ['周一', '周二', '周三', '周四', '周五', '周六', '周七'],
         },
         yAxis: {
             type: 'value'
         },
         series: [{
             data: [20, 30, 50, 100, 70, 10, 30],
             type: 'bar',
             showBackground: true,
             backgroundStyle: {
                 color: 'rgba(67, 167, 288, 0.2)'
             },
             color: '#43a7e4',
         }],
         textStyle: {
             color: "white" ,
         },

     };
     // 4.传入数据
     this.echartThree.setOption(option);
     
 },

data中注册属性

data(){
   return {
       echartThreee: null, 
   }
},

局部引入

在组件内写入

import * as echarts from 'echarts'

使用

新建节点容器

<div ref="echartLeftThree" class="echartLeftThree"></div>

初始化

echartLeftThree(){
     //2.初始化
     this.echartThree = echarts.init(this.$refs.echartLeftThree);
     //3.配置数据

     let option = {
         xAxis: {
             type: 'category',
             data: ['周一', '周二', '周三', '周四', '周五', '周六', '周七'],
         },
         yAxis: {
             type: 'value'
         },
         series: [{
             data: [20, 30, 50, 100, 70, 10, 30],
             type: 'bar',
             showBackground: true,
             backgroundStyle: {
                 color: 'rgba(67, 167, 288, 0.2)'
             },
             color: '#43a7e4',
         }],
         textStyle: {
             color: "white" ,
         },

     };
     // 4.传入数据
     this.echartThree.setOption(option);
     
 },

data中注册属性

data(){
   return {
       echartThreee: null, 
   }
},

补充

如果觉得官网的案例没有自己想要的，自己也不想配的话可以看看这个: makeapie.里面有很多其他的echarts案例