vue2.0之echarts使用

1.首先下载echart依赖

 npm install echarts --save
备注:npm 安装报错时使用cnpm

 2.全局注册 vue中注册echart

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

3.在所使用模块 直接使用$echarts

<script>

          methods:{

　　　　 //绘制线性图
                  drawLine(id, titleName, gridData, yAxisName, legendData, xAxisData, seriesData) {
                　　　　this.charts =this.$echarts.init(document.getElementById(id));
                　　　　this.charts.setOption({
                   　　　 　　title: {
                       　　　　 　　text: titleName,
                      　　　　 　　 x: 'center'
                  　　　　  　　},
                  　　　　　 tooltip: {
                    　　　   　　  trigger: 'axis'
                    　　 　　 },
                   　　  　　legend: {
                      　　　　　  bottom: '5px',
                                　　  data: legendData,
                 　　　　   },
                　　　　    grid: {
                  　　　　      left: '3%',
                   　　　　     right: '4%',
                     　　　　   bottom: gridData,
                   　　　　     top: '60px',
                     　　　　   containLabel: true
                  　　　　  },
              　　　　      xAxis: {
                  　　　　      type: 'category',
                   　　　　     boundaryGap: false,
                　　　　        data: xAxisData,
              　　　　      },
            　　　　        yAxis: {
              　　　　          type: 'value',
              　　　　          name: yAxisName,
               　　　　     },
                　　　　    series: seriesData
             　　　　   })
       　　　　     }

　　　　　　},

//调用
        mounted(){

　　　　this.$nextTick(function() {
                this.drawLine('lineChart', this.lineChartTitle, '60px', this.lineChartYAxisName,
                    this.lineChartLegendData, this.lineChartXAxisData,
                    this.lineChartSeriesData);
            });

　　}

 

</script>

 

4.不在main,js引用直接在所使用模块引用

    // 在所用模块引入echarts
    import echarts from 'echarts';

此时定义echarts时需要将

this.charts =this.$echarts.init(document.getElementById(id));  中的this.$echarts换成echarts

this.charts = echarts.init(document.getElementById(id));

 

 

 

具体代码如下

<style scoped>
    .searchBtn {
        width: 100%;
        text-align: left;
        background: #fbfbfb;
        border: none;
        border-bottom: 1px solid #eee;
    }
    
    .describe {
        display: inline-block;
        font-weight: bold;
        padding: 15px 10px;
    }
    
    .changeTab {
        color: #10a5f8;
    }
    
    .chartBoxs {
        width: 100%;
        height: 2rem;
        margin-top: 10px;
    }
</style>
<template>
    <div>
        <v-head :header_title="title_context"></v-head>
        <el-row :gutter="0" style="margin: 10px;">
            <el-col :span="24">
                <el-button class="searchBtn searchTime" @click='openPicker()'>
                    <i class="fl el-icon-time"></i>
                    <span>{{searchTime}}</span>
                    <i class="fr el-icon-arrow-down"></i>
                </el-button>
            </el-col>
            <el-col :span="24" style="background: white;border-bottom: 1px solid #dadada;">
                <span class="describe showMonth fl">{{searchMonth}}月接收/转出情况</span>
                <span class="describe changeTab fr" @click='changeTabView()'>{{changeTab}}</span>
            </el-col>
            <el-col :span="24" style="background: white;">
                <div class="chartBoxs" , this.chart1.chartSeriesData);
            });

        }
    }
</script>