vue引入echarts(pc&移动)

1.安装依赖

sudo cnpm install echarts --s

2.main.js引入

// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

3.需要的页面引入

import echarts from 'echarts'

4.methods自定义方法

    // 折线图
    getLine () {
        // 基于准备好的dom，初始化echarts实例
        let myChart1 = echarts.init(document.getElementById('myChart1'));
        //或者this.myChart1 = echarts.init(document.getElementById(id))
        // 绘制图表，this.echarts1_option是数据
        myChart1.setOption({
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            y: 'bottom',
            x: 'center',
            data:['当前房价','区域房价'],
            padding:[0,0,0,0],
            //图例文字的样式
            textStyle: { 
                // color: '#fff',
                fontSize: 22
            }
          },
          xAxis: {//横坐标
            type: 'category',
            boundaryGap: false,
            data: this.xAxisData,
            //  改变x轴字体颜色和大小  
            axisLabel: {
                textStyle: {
                    // color: '#62B4BB',
                    fontSize:'22'
                },
            },
          },
          yAxis: {
            type: 'value',
            //  改变x轴字体颜色和大小  
            axisLabel: {
                textStyle: {
                    // color: '#62B4BB',
                    fontSize:'22'
                },
            },
          },
          series: [
            {
              name:'当前房价',
              type:'line',
              // stack: '总量',
              data: [11, 90, 15, 13, 11, 13, 10],
            },
            {
              name:'区域房价',
              type:'line',
              // stack: '总量',
              data: [11, 22, 15, 13, 98, 13, 19],
            }
          ]
        })
    }

5.初始化echarts,调用(视情况而定，活数据一般在ajax方法成功后调用)

//放在mounted里面
mounted(){
   this.getLine()
},
//或者在axios/ajax成功后调用echarts
that.getLine()

可以去官网替换类型 https://echarts.apache.org/zh/index.html