zaibei_charts/test/gauge/ChartGauge2/index.js

import ChartDigit2 from '../../../src/chart/gauge/ChartGauge2/ChartGauge2.js';

let chart=new ChartDigit2(document.getElementsByClassName('c1')[0],{});
window.addEventListener('resize',()=>{
	chart.resize();
});


let option = {
    title: {},
    bg:{
		backgroundColor:"#000000"
    },
    grid: {
        left:'18%',
        top:'48%',
        right:'18%',
        bottom:'48%',
        containLabel: false,
    },
    legend:{
        left: "28%",
        top: '80%',
        name1: '差',
        name2: '良',
        name3: '优',
        itemWidth: 12,
        textStyle: {
            fontSize: 16,
            // color: '#50a7bd'
        }
    },
    gauge:{
        name:'图表',
        min: 10,
        mid: 15,
        max: 30,
        splitNumber: 10,
        lineWidth: 1,
        curLineWidth: 8,
        axisLine: {
            show: true,
            lineStyle: {
                color: '#f83d3d',
                lineWidth: 2,
            }
        },
        axisTick: {
            show: true,
            length: 6,
            lineStyle: {
                color: '#ffffff',
                lineWidth: 1,
            }
        },
        axisLabel: {
            distance: 0,
            color: '#bdbdbd',
            fontSize: 16,
            fontWeight: 'normal',
        },
        title: { // 仪表盘标题
            show: true,
            // x, y，单位px  相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
            offsetCenter: {
                x: 0,
                y: '12%'
            },
            color: '#ffffff',
            fontSize: 20,
            fontWeight: 'normal',
        },
    },
    color:['#f83d3d','#fa8444','#3fffa7','#125fc9','#ffffff'],
    series: [{
        name: '利润',
        data: [{
            name: '实际值',
            value: 12.5
        },{
            name: '目标值',
            value: 12
        }],
        z: 2,
    }]
};
let option1 = {
    title: {},
    bg:{
		backgroundColor:"#000000"
    },
    grid: {
        left:'18%',
        top:'48%',
        right:'18%',
        bottom:'48%',
        containLabel: false,
    },
    legend:{
        left: "28%",
        top: '80%',
        name1: '差',
        name2: '良',
        name3: '优',
        itemWidth: 12,
        textStyle: {
            fontSize: 16,
            // color: '#50a7bd'
        }
    },
    gauge:{
        name:'图表',
        min: 10,
        mid: 15,
        max: 40,
        splitNumber: 10,
        lineWidth: 1,
        curLineWidth: 8,
        axisLine: {
            show: true,
            lineStyle: {
                color: '#f83d3d',
                lineWidth: 2,
            }
        },
        axisTick: {
            show: true,
            length: 6,
            lineStyle: {
                color: '#ffffff',
                lineWidth: 1,
            }
        },
        axisLabel: {
            distance: 0,
            color: '#bdbdbd',
            fontSize: 16,
            fontWeight: 'normal',
        },
        title: { // 仪表盘标题
            show: true,
            // x, y，单位px  相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
            offsetCenter: {
                x: 0,
                y: '12%'
            },
            color: '#ffffff',
            fontSize: 20,
            fontWeight: 'normal',
        },
    },
    color:['#f83d3d','#fa8444','#3fffa7','#125fc9','#ffffff'],
    series: [{
        name: '利润',
        data: [{
            name: '实际值',
            value: 12.5
        },{
            name: '目标值',
            value: 12
        }],
        z: 2,
    }]
};
let option2 = {
    title: {},
    bg:{
		backgroundColor:"#000000"
    },
    grid: {
        left:'18%',
        top:'48%',
        right:'18%',
        bottom:'48%',
        containLabel: false,
    },
    legend:{
        left: "28%",
        top: '80%',
        name1: '差',
        name2: '良',
        name3: '优',
        itemWidth: 12,
        textStyle: {
            fontSize: 16,
            // color: '#50a7bd'
        }
    },
    gauge:{
        name:'图表',
        min: 10,
        mid: 15,
        max: 40,
        splitNumber: 5,
        lineWidth: 1,
        curLineWidth: 8,
        axisLine: {
            show: true,
            lineStyle: {
                color: '#f83d3d',
                lineWidth: 2,
            }
        },
        axisTick: {
            show: true,
            length: 6,
            lineStyle: {
                color: '#ffffff',
                lineWidth: 1,
            }
        },
        axisLabel: {
            distance: 0,
            color: '#bdbdbd',
            fontSize: 16,
            fontWeight: 'normal',
        },
        title: { // 仪表盘标题
            show: true,
            // x, y，单位px  相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
            offsetCenter: {
                x: 0,
                y: '12%'
            },
            color: '#ffffff',
            fontSize: 20,
            fontWeight: 'normal',
        },
    },
    color:['#f83d3d','#fa8444','#3fffa7','#125fc9','#ffffff'],
    series: [{
        name: '利润',
        data: [{
            name: '实际值',
            value: 12.5
        },{
            name: '目标值',
            value: 12
        }],
        z: 2,
    }]
};
setTimeout(()=>{
	chart.setOption(option)
},3000)
setTimeout(()=>{
	chart.setOption(option1)
},3000)
setTimeout(()=>{
	chart.setOption(option2)
},3000)