最终效果:
颜色可以自己调整
注意:我这是在vue中的写法,在函数调用和初始化echarts时需要注意
warning() {
// 计算颜色随着指针一起走动
var dataArr = [{
// show: false,
value: '300',
value1: '500',
value2: '12'
}];
var value = dataArr[0].value;
var value1 = dataArr[0].value1;
var value2 = dataArr[0].value2;
// var min = value.split('.');
// var degrees = 180 - (180 * value / 15); //蓝色刻度尺计算
// var degrees = (3 - value) / 50 * 30; //蓝色刻度尺计算
// var degrees = (500 - value) / 50 * 30; //蓝色刻度尺计算
// var degrees = (500 - value) / 50 * 30; //蓝色刻度尺计算
//计算三个表盘数字跟着表盘颜色一起动
var num = value / 300;
var num1 = value1 / 500;
var num2 = value2 / 12;
var colorSet = [
[num, '#00B3FE'],
[1, '#212D43']
];
// 指针走动为渐变色
//var axislineColor = new echarts.graphic.LinearGradient(0, 0, 1, 0, [{ //此处做过修改需注意因为直接拿过来用不了
var axislineColor = new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: 'rgba(0, 201, 153, 1)'
},
{
offset: 1,
color: 'rgba(248, 6, 6, 1)'
},
]);
let myChart = this.$echarts.init(document.getElementById('myChart'));
myChart.setOption({
tooltip : {
formatter: "{a} <br/>{c} {b}"
},
//去掉保存图片和刷新功能
toolbox: {
show: false,
feature: {
restore