Echart4 渐变色使用方法

最新推荐文章于 2023-07-25 20:40:28 发布

weixin_33875564

最新推荐文章于 2023-07-25 20:40:28 发布

阅读量314

点赞数

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/u/2612473/blog/2994984

版权

2019独角兽企业重金招聘Python工程师标准>>>

在使用echarts绘制图表时, 如果需要使用渐变色, 则应使用echarts内置的渐变色生成器echarts.graphic.LinearGradient

<div id="barchart1" style="height:350px;"></div>


    <script type = "text/javascript" >
    // 指定图表的配置项和数据
    var option = {
        legend: {
            data: ['用量统计'],
        },
        tooltip: {},

        xAxis: {
            data: ["8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "1", "2", "3", "4", "5", "6", "7"],
        },
        yAxis: {},
        series: [{
            name: '用量统计',
            type: 'bar',
            barWidth: '25%',
            itemStyle: {
                normal: {
                    barBorderRadius: [10, 10, 10, 10],
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 1, 0, // 相当于2点的位置 A(0, 0)  B(1, 0)
                        [
                            { offset: 0, color: '#048BFE' }, // A点的颜色
                            { offset: 1, color: '#00EEF1' } // B点的颜色
                        ]
                    ),
                    label: {
                        show: true,
                        position: 'top',
                        textStyle: {
                            color: '#fff',
                            fontSize: '14'
                        }
                    }
                }
            },
            data: [11, 13, 15, 17, 19, 22, 25, 29, 32, 11, 13, 15, 17, 19, 22, 25, 29, 32, 11, 13, 15, 17, 19, 22],
        }]
    };
var myChart = echarts.init(document.getElementById('barchart1'), theme);
myChart.setOption(option);
ObjectResize(myChart.resize);

function ObjectResize(fn) {
    if (window.addEventListener) {
        window.addEventListener('resize', fn, false);
    } else {
        window.attachEvent('onresize', fn)
    }
}
</script>

转载于:https://my.oschina.net/u/2612473/blog/2994984