Voc成分谱图ECharts Gallery

20:11:45图表已生成
代码
//柱状图  渐变色双y轴

//可以鼠标滚动

//点击背景和点击图形触发不同的事件

let dataList = [{
    name: '苹果',
    value: '56'
}, {
    name: '橘子',
    value: '75'
}, {
    name: '香蕉',
    value: '85'
}, {
    name: '火龙果',
    value: '78'
}, {
    name: '西瓜',
    value: '76'
}, {
    name: '椰子',
    value: '45'
}, {
    name: '葡萄',
    value: '100'
}];


myChart.setOption({
    backgroundColor: 'rgb(20,28,52)',
    grid: {
        left: "10%", //距离左边的距离
        right: "13%", //距离右边的距离
        bottom: "10%", //距离下边的距离
        top: "8%" //距离上边的距离
    },
    title: {
        text: '',
        left: 26,
        top: 26,
        textStyle: {
            color: '#FFFFFF',
            fontSize: 15,
            fontWeight: 50000,
            fontFamily: 'PingFang SC'
        }
    },
    /*toolbox: {
        feature: {
            dataView: {
                show: true,
                readOnly: true
            },
            magicType: {
                show: true,
                type: ["line", "bar"]
            },
            restore: {
                show: false
            },
            saveAsImage: {
                show: true,
                name: "爱吃水果指数统计图",
                pixelRatio: 2
            }
        },
        iconStyle: {
            normal: {
                borderColor: "#41A7DE"
            }
        },
        itemSize: 12,
        top: 20,
        right: 22
    },*/
    tooltip: {
        trigger: "axis",
        axisPointer: {
            type: "shadow",
            crossStyle: {
                color: "#999"
            }
        },
    },
    xAxis: [{
        type: "category",
        data: ['丙烯', '乙烯', '甲苯', '烯烃', '苯系物', '烷烃'],
        axisLabel: {
            textStyle: {
                color: "#ffffff",
                fontSize: 14,
                fontFamily: "Microsoft YaHei"
            }
        },
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        }
    }],
    yAxis: [{
            type: "value",
            axisLabel: {
                formatter: "{value}%",
                textStyle: {
                    color: "#fff",
                    fontSize: 12,
                    fontFamily: "Microsoft YaHei"
                },
            },
            splitLine: {
                lineStyle: {
                    color: "#666"
                }
            },
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            }
        },
        
    ],
    dataZoom: [{
        type: 'inside',
        start: 0,
        end: dataList.length > 15 ? 35 : 100
    }],
    series: [{
            name: "",
            type: "bar",
            data: dataList,
            barGap: '-100%',
            barCategoryGap: '60%',
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(27,168,240,1)'
                        },
                        {
                            offset: 1,
                            color: 'rgba(32,40,95,0.3)'
                        }
                    ])
                },
                emphasis: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(27,168,240,1)'
                        },
                        {
                            offset: 1,
                            color: 'rgba(27,168,240,0.3)'
                        }
                    ])
                }
            },
        },
        
    ]
})

//这里先解绑，防治click事件触发多次
myChart.off('click')

//这里使用getZr(),直接使用click方法点击背景不会触发
myChart.getZr().on('click', params => {
    const pointInPixel = [params.offsetX, params.offsetY]

    if (myChart.containPixel('grid', pointInPixel)) {
        const pointInGrid = Math.abs(myChart.convertFromPixel(
            'grid',
            pointInPixel
        )[0])
        //这个就是当前的index下标
        console.log(pointInGrid)
        //这里就是当前的值
        console.log(dataList[pointInGrid])

    } else {
        console.log('点击的是背景...')
    }
})
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
