前提
如果安装了datav的依赖,先找到轮播表的源码,大概位置在这:node-modules 下的如图位置,把scrollBoard复制出来放到自己的项目文件夹里,修改的话只修改这个就好,不动源码,
注:怕混淆的话可以自己改个名字,改的时候把main.vue中的name和index.js中的名字改了就行
第一步,改代码,在复制出来的文件中的main.vue中找到animation()方法,在该方法的结尾处添加以下代码:
let numVal = 0;
let tempLength = mergedConfig.data.length;
let tempIndex = animationIndex;
if (animationIndex > tempLength) {
tempIndex = animationIndex - tempLength;
}
if (tempIndex == 0 || tempIndex == tempLength) {
numVal = mergedConfig.val[1];
} else if (tempIndex == rowsData.length - 1 || tempIndex == tempLength - 1) {
numVal = mergedConfig.val[0];
} else {
numVal = mergedConfig.val[tempIndex + 1];
}
this.$emit("gaugeVal", numVal);
第二步,在创建仪表盘的页面里引入该组件,并定义两个事件用来接收仪表盘的参数;
<!-- vue页面-->
<div id="main" style="width:600px;height="400px"></div>
<dv-scroll-board-change
:config="configGu"
style="width: 100%;height: 100px;z-index:1;position: relative;"
@gaugeVal="receive" @yzData="getYzData"
/>
import * as echarts from 'echarts';
export default {
data() {
return {
gaugeVal: 0,
configGu: {//比datav提供的组件多传了一个val数组值
data: [['张三',50],['李四',80],['王五',90]],//轮播表对应的轮播字段
val:[50,80,90],//轮播表对应的轮播字段应该在仪表盘上显示的值
rowNum: 3
oddRowBGC: 'transparent',
evenRowBGC: 'transparent',
align: ['center'],
waitTime: 5000
},
}
},
mounted() {
this.myEcharts();
},
methods: {
myEcharts() {
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
let option;
option = {
series: [
{
type: 'gauge',
startAngle: 180,
endAngle: 0,
axisLine: {
lineStyle: {
width: 10,
color: [
[0.5, '#3680b5'],
[1, '#c71c1c']
]
}
},
pointer: {
itemStyle: {
color: [
[0.5, '#3680b5'],
[1, '#c71c1c']
]
},
},
axisTick: {
distance: -30,
length: 8,
lineStyle: {
color: '#fff',
width: 2
}
},
splitLine: {
distance: -20,
length: 5,
lineStyle: {
color: '#fff',
width: 2
}
},
axisLabel: {
color: 'auto',
distance: 30,
fontSize: 12
},
detail: {
valueAnimation: true,
offsetCenter: [0, '12%'],
formatter: '{value}分',
color: 'auto',
fontSize: 16,
},
data: [
{
value: this.gaugeVal
}
]
}
]
};
option && myChart.setOption(option);
},
receive(gaugeVal) {
if (new RegExp(/^\d+$/).test(this.gaugeVal)) {
this.gaugeVal = gaugeVal;
this.myEcharts();
}
},
}
}