Vue Echarts 引用（1）

Vue中Echarts的使用

安装Echarts 包

vue2.x 版本安装方式：

npm install echarts --save

vue3.x 安装方式：
npm add echarts --save（博主用的2.x 这个安装方式有待验证）

引入项目

全局引入(main.js中)：

import echarts from 'echarts';
Vue.prototype.$echarts=echarts;

这种方法直接将Echarts绑定在Vue实例上，在项目的任意页面上，直接Vue.$echarts即可

Or

局部引入(在需要引入的组件中):

import echarts from 'echarts'

这种只能在当前组件中使用，echarts即可调用

初始化

在组件模板里写一个

(参考资料里说的是dom元素，博主刚入门时只见过用div的）

<div id ='main' ref='main' style="width: 600px;height:400px;"></div>

在mounted 中初始化 echarts:
init 初始化必须参数是指定画图的块
设置好options之后
利用setOptions设定格式
详情参考官网（https://www.echartsjs.com/zh/index.html）
(以下代码来源：(https://www.jianshu.com/p/df87d92fd847)）

mounted()
    {
      const  myCharts = echarts.init(this.$refs.main);
      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],
              }
          ]}

      myCharts.setOption(options);
    },

运行结果：