vue2.0之echarts使用

1.首先下载echart依赖

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

2.全局注册 在main.js里引入echart并在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" id="lineChart"></div>
            </el-col>
        </el-row>
        <el-row :gutter="0" style="margin: 10px;">
            <el-col :span="24" style="background: white;border-bottom: 1px solid #dadada;">
                <span class="describe  fl">总产量</span>
                <span class="describe fr">{{total}}kg</span>
            </el-col>
            <el-col :span="24" style="background: white;">
                <div class="chartBoxs" id="pieChart">

</div>
            </el-col>
        </el-row>
        <template>
            <mt-datetime-picker ref="picker" v-model="pickerVisible" type="date" year-format="{value} 年" month-format="{value} 月" date-format="{value} 日" @confirm="handleConfirm">
            </mt-datetime-picker>
        </template>
    </div>
</template>

<script>
    import head from "../../components/head";
    import { DatetimePicker } from 'mint-ui';
    import moment from 'moment';
    // 引入echarts
    import echarts from 'echarts';
    export default {
        data() {
            return {
                title_context: "成本分析",
                searchTime: moment().format('YYYY-MM'),
                searchMonth: moment().format('MM'),
                changeTab: '切换转出情况',
                pickerVisible: '',
                total: 3.037,
                lineChartTitle: '',
                lineChartYAxisName: 'Kg',
                lineChartLegendData: ['测转入'],
                lineChartXAxisData: ['1日', '5日', '9日', '13日', '17日', '21日', '25日', '29日'],
                lineChartSeriesData: [{
                    name: '测转入',
                    type: 'line',
                    data: [220, 182, 191, 234, 290, 360, 310, 290]
                }],
                chart1: {
                    chartSeriesData: [{
                            value: 2.86,
                            name: '0.5号细针管'
                        },
                        {
                            value: 20,
                            name: '0.6号细针管'
                        }
                    ]
                }

}
        },
        components: {
            vHead: head,
        },
        methods: {
            //打开时间
            openPicker() {
                this.$refs.picker.open();
            },
            //选择时间
            handleConfirm(data) {
                this.searchTime = moment(data).format('YYYY-MM');
                this.searchMonth = moment(data).format('MM');
            },
            changeTabView() {
                if(this.changeTab == "切换转出情况") {
                    this.changeTab = "切换转入情况";
                    this.lineChartTitle = '',
                        this.lineChartYAxisName = 'Kg',
                        this.lineChartLegendData = ['测转出'],
                        this.lineChartXAxisData = ['1日', '5日', '9日', '13日', '17日', '21日', '25日', '29日'],
                        this.lineChartSeriesData = [{
                            name: '测转出',
                            type: 'line',
                            data: [220, 182, 191, 234, 290, 360, 310, 290]
                        }],
                        this.chart1 = {
                            chartSeriesData: [{
                                    value: 2.86,
                                    name: '转出0.5号细针管'
                                },
                                {
                                    value: 20,
                                    name: '转出0.6号细针管'
                                }
                            ]
                        }

this.drawLine('lineChart', this.lineChartTitle, '60px', this.lineChartYAxisName,
                        this.lineChartLegendData, this.lineChartXAxisData,
                        this.lineChartSeriesData);
                    this.drawPie("pieChart", this.chart1.chartSeriesData);

} else if(this.changeTab == "切换转入情况") {
                    this.changeTab = "切换转出情况";
                    this.lineChartTitle = '',
                        this.lineChartYAxisName = 'Kg',
                        this.lineChartLegendData = ['测转入'],
                        this.lineChartXAxisData = ['1日', '5日', '9日', '13日', '17日', '21日', '25日', '29日'],
                        this.lineChartSeriesData = [{
                            name: '测转入',
                            type: 'line',
                            data: [220, 182, 191, 234, 290, 360, 310, 290]
                        }],
                        this.chart1 = {
                            chartSeriesData: [{
                                    value: 2.86,
                                    name: '转入0.5号细针管'
                                },
                                {
                                    value: 20,
                                    name: '转入0.6号细针管'
                                }
                            ]
                        }

this.drawLine('lineChart', this.lineChartTitle, '60px', this.lineChartYAxisName,
                        this.lineChartLegendData, this.lineChartXAxisData,
                        this.lineChartSeriesData);
                    this.drawPie("pieChart", this.chart1.chartSeriesData);
                }
            },
            //绘制线性图
            drawLine(id, titleName, gridData, yAxisName, legendData, xAxisData, seriesData) {
//                this.charts =this.echarts.init(document.getElementById(id));
                this.charts = 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
                })
            },
            //绘制环形图表
            drawPie(id, chartSeriesData) {
//                this.charts =this.echarts.init(document.getElementById(id));
                this.charts = echarts.init(document.getElementById(id));
                this.charts.setOption({
                    tooltip: {
                        show: false,
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%) "
                    },
                    legend: {
                        orient: 'vertical',
                        x: 'left',
                        data: ['0.5号细针管', '0.6号细针管']
                    },

series: [{
                        type: 'pie',
                        itemStyle: {
                            normal: {
                                label: {
                                    formatter: "{b}\n({d}%) "
                                }
                            }
                        },
                        label: {
                            normal: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    formatter: '{b}: {d}'
                                },
                                show: true,
                                textStyle: {
                                    fontSize: '12',
                                    fontWeight: 'bold'
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        avoidLabelOverlap: false,
                        radius: ['50%', '75%'],
                        center: ['50%', '55%'],
                        data: chartSeriesData
                    }]
                })
            }
        },
        created() {

},
        //调用
        mounted() {
            this.$nextTick(function() {
                this.drawLine('lineChart', this.lineChartTitle, '60px', this.lineChartYAxisName,
                    this.lineChartLegendData, this.lineChartXAxisData,
                    this.lineChartSeriesData);
                this.drawPie("pieChart", this.chart1.chartSeriesData);
            });

}
    }
</script>