vue-clii中使用echarts画折线图

一、npm安装echarts

npm install echarts --save

二、在需要的vue页面引入

 import echarts from 'echarts'

 

三、给div一个id

  <div id="areaBox" style="width: 60%;height: 60vh"> </div>

四、data里面定义

 data(){

        return{

            // 指定图表的配置项和数据

            areaBox : {

                tooltip: {              //设置tip提示

                    trigger: 'axis'

                },

                legend: {               //设置区分（哪条线属于什么）

                    data:['面积(亩)']

                },

                color: ['#00ff00'],       //设置区分（每条线是什么颜色，和 legend 一一对应）

                xAxis: {                //设置x轴

                    type: 'category',

                    boundaryGap: false,     //坐标轴两边不留白

                    data: ['高先甸', '毕武庄', '横古', '曹庄子', '将军庄', '高家围', '石桥沽',],

                    name: '村庄名称',           //X轴 name

                    nameTextStyle: {        //坐标轴名称的文字样式

                        color: '#FA6F53',

                        fontSize: 16,

                        padding: [0, 0, 0, 20]

                    },

                    axisLine: {             //坐标轴轴线相关设置。

                        lineStyle: {

                            // color: '#FA6F53',

                        }

                    }

                },

                yAxis: {

                    name: '',

                    nameTextStyle: {

                        color: '#FA6F53',

                        fontSize: 16,

                        padding: [0, 0, 10, 0]

                    },

                    axisLine: {

                        lineStyle: {

                            // color: '#FA6F53',

                        }

                    },

                    type: 'value'

                },

                series: [

                {

                    name: '面积(亩)',

                    data:  [220, 232, 201, 234, 290, 230, 220],

                    type: 'line',               // 类型为折线图

                    lineStyle: {                // 线条样式 => 必须使用normal属性

                        normal: {

                            color: '#00ff00',

                        }

                    },

                },

            ]

            },

五、methods里面定义方法

 getEcharts(){

            this.chartLineAreaBox = echarts.init(document.getElementById('areaBox'))

            // 使用刚指定的配置项和数据显示图表。

            this.chartLineAreaBox.setOption(this.areaBox)

        }

六、mounted里面调用

 this.getEcharts()