vue项目中使用echarts

 

本文包含在vue项目中如何使用echarts，以及项目中经常会遇到的图表样式的写法

https://echarts.baidu.com/echarts2/doc/example.html
（echart实例，包含饼状图、柱状图等等图表例子，你可以找到你所需要的图表类型）

https://echarts.baidu.com/echarts2/doc/doc.html
（echarts 使用文档，里面有很多属性和方法可供参考哦）

---

1.安装echarts包

cnpm install echarts --save

2.引入到项目中

a.全局引入 （在main.js中引入）

import echarts from 'echarts'
Vue.prototype.$echarts = echarts
这种方法是直接绑定在vue实例上，所以在项目中任何页面，直接 this.$echarts 即可

b.局部引入（在所需页面引入）

import echarts from 'echarts'

3.初始化echarts

a.首先在你需要echarts的页面中得创建一个dom元素

b.其次，在mounted中初始化echarts( 不能写在created中哦)（ 以下例子为折线图）

mounted(){
    以下三步即可完成echarts的初始化使用,代码注释的详解别忘了看看
   1.  const  myCharts = this.$echarts.init(this.$refs.myCharts);
   2.   let options = {
          title: { 
             text: '未来一周气温变化',   //图表顶部的标题 
             subtext: '纯属虚构'    //副标题
          },
          tooltip: {   //鼠标悬浮框的提示文字
              trigger: 'axis'
            },
          legend: {
            data:['最高气温','最低气温']
          },
          xAxis : [{  //x轴坐标数据
            type : 'category',
            boundaryGap : false,
            data : ['周一','周二','周三','周四','周五','周六','周日']
            }],
           yAxis : [{   //y轴坐标数据
              type : 'value',
              axisLabel : {
                formatter: '{value} °C'
              }
            }],
          series: [  //驱动图表生成的数据内容数组，几条折现，数组中就会有几个对应对象，来表示对应的折线
            {
              name:"最高气温",
              type: "line",  //pie->饼状图  line->折线图  bar->柱状图
              data:[11, 11, 15, 13, 12, 13, 10], 
              },
            {
              name:"最低气温",
              type: "line",  //pie->饼状图  line->折线图  bar->柱状图
              data:[1, -2, 2, 5, 3, 2, 0],
              }
          ]}

    3.  myCharts.setOption(options);
}

echarts中常用方法 https://www.jianshu.com/p/4f459d16e8b4

转自:https://www.jianshu.com/p/df87d92fd847