<template>
<div>
<!-- <h2>本月抄表完成率</h2> -->
<!-- <div id="chart1" style=" 80%;height: 400px;top: 50px;left: 10%;border: 3px solid #000;"></div> -->
<div ref="barg0" style=" 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>