前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Echart4 渐变色使用方法 原

Echart4 渐变色使用方法 原

作者头像
tianyawhl
发布2019-04-04 09:36:19
1.5K0
发布2019-04-04 09:36:19
举报
文章被收录于专栏:前端之攻略前端之攻略

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

代码语言:javascript
复制
<div id="barchart1" style="height:350px;"></div>
代码语言:javascript
复制
    <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>

(adsbygoogle = window.adsbygoogle || []).push({});

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018/12/29 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档