echarts配置项说明//持续添加

<template>

<div>

     <!-- <h2>本月抄表完成率</h2> -->

<!-- <div id="chart1" style="width: 80%;height: 400px;top: 50px;left: 10%;border: 3px solid #000;"></div> -->

  <div ref="barg0" style="width: 600px;height:400px;"></div> //设置一个容器

</div>

</template>

<script>

import echarts from 'echarts'

export default {

    data () {

        return {

            option : {

                 title: {   

                    text:'德清县',         // 仪表盘标题。

         show: true,             // 是否显示标题,默认 true。

         offsetCenter: [0,"20%"],//相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。

                    fontSize: 20,// 文字的字体大小,默认 15。

                    textStyle:{

                        color:'#fff' //设置颜色   其他雷同

                    },          

                     left:'center' //left：'center' ，这样就可以让标题在 文本中图表中居中了

padding: [

25, // 上

10, // 右

5, // 下

10, // 左

]             //设置左上角标题和和图的距离  其他也是一样 雷同

                },

                

                tooltip : {

                    formatter: "{a} <br/>{b} : {c}%"

                },

                toolbox: {

show : false,    //去除工具栏的保存 一类

                    feature: {

                        restore: {},

                        saveAsImage: {}

                    },

                    show : false     //这个可以让默认的 编辑按钮 还原和保存图 隐藏

                },

　　　　

,

xAxis: {

axisLine: {

lineStyle: {

type: "dashed",   //改变网格中 x 或 y 轴 最左边 或者 最底下的 线的类型 （最右边文字 右手边那一根线 或者最底下文字 上面那一根线 ）

color: "#5F6981"    //改变网格中 x 或 y 轴 最左边 或者 最底下的 线的颜色  （最右边文字 右手边那一根线 或者最底下文字 上面那一根线 ）

}

},

type: 'category',

boundaryGap: false,

data: ['1月','2月','3月','4月','5月','6月','7日','8月','9月','10月','11月','12月'],

axisLabel:{           //设置x轴字体的颜色

textStyle:{

color:'#CDD6E6'

}

}

},

yAxis: {

type: 'value',

max：40，   //设置左边显示时的最大 数字 是多少

axisLabel:{

textStyle:{    //设置y轴字体的颜色

color:'#CDD6E6'

}，

splitLine :{    //把图标里面的 网格线 实线变为虚线    （默认是实线）

              lineStyle:{

                type:'dashed',

                color:'#CDD6E6'

              }

            },

}

},

legend: {

icon:"rect",          //通过这个icon属性可以然默认的右上角切换是否显示线条的图标 样式换位方块

data:['视频广告','联盟广告','邮件营销'],   //这里和series 每一个对象里面的name属性一一对应才会出现对应右上角的的切换图标

left:'right',   //这个属性可以更快放置的位置

textStyle:{   //这是颜色

color:'#CDD6E6'

},

padding: [  //这是距离图表的距离

25, // 上

10, // 右

5, // 下

10, // 左

]

},

                series: [

                    {

　　　　　　　　

　　　　　　symbol:"none",    //取消折线图上的点标记

　　　　　　stack: '总量1',     //折线图上 只需要把每一个对象 的这个属性 设置为不一样 折线图就不会产生叠加 

　　　　　　smooth: true,   //把折现变为平滑的线

                        name: '视频广告',

                        type: 'gauge',

                        detail: {formatter:'{value}%'},

                        data: [{value: 50, name: ''}] //this.option.series[0].data[0].value

                    }

                ],

color:['#4C84FF','#8A44FA','#77C450']    //设置这线条的颜色 是一个数组 代表第一个对象  第二个对象 第三个对象 线条的颜色

                    }

                    }

                },

                methods: {

                    customized(){

                        var chart1 = echarts.init(this.$refs.barg0);

                            setInterval(() =>{

                            this.option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;

                            chart1.setOption(this.option, true);

                        },2000);

                        chart1.setOption(this.option)

                    }

                },

                mounted() {

                    this.customized()

                    // let _this = this;

                    this.$nextTick(() => {

                    let bargraph0 = echarts.init(this.$refs.barg0);

                    bargraph0.setOption(this.option);

                    window.addEventListener("resize", bargraph0.resize);

                    // let bargraph = echarts.init(_this.$refs.barg);

                    // bargraph.setOption(_this.option2);

                    // window.addEventListener("resize", bargraph.resize);

                    // let bargraph2 = echarts.init(_this.$refs.barg2);

                    // bargraph2.setOption(_this.option3);

                    // window.addEventListener("resize", bargraph2.resize);

                    // });

                    })

                }

}

</script>

<style lang="">

</style>