zoukankan      html  css  js  c++  java
  • echarts如何给柱形图的每个柱子设置不同颜色

    总结下这几日用echarts库作基本图形遇到的一些问题。

    echarts快速上手可参考官网:

    http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

    在作柱形图时,如果需要给每个柱子设置不同颜色,参考以下说明:

    复制代码
    var option = {
        xAxis: {
            data: ["苹果","小米","华为","其他"]  
        },
        yAxis: {
            splitLine:{ show:false}  //改设置不显示坐标区域内的y轴分割线
        },
        series: [{
                name: '手机品牌',
                type: 'bar',
                data: [19, 15, 40, 32],
                //设置柱子的宽度
                barWidth : 30,
                //配置样式
                itemStyle: {   
                    //通常情况下:
                    normal:{  
                //每个柱子的颜色即为colorList数组里的每一项,如果柱子数目多于colorList的长度,则柱子颜色循环使用该数组 color: function (params){ var colorList = ['rgb(164,205,238)','rgb(42,170,227)','rgb(25,46,94)','rgb(195,229,235)']; return colorList[params.dataIndex]; } }, //鼠标悬停时: emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } }, }],
         //控制边距  grid: { left: '0%', right:'10%', containLabel: true, }, };
  • 相关阅读:
    洛谷 P2958 [USACO09OCT]木瓜的丛林Papaya Jungle
    洛谷 P1400 塔
    10-2 集合之List
    主从数据库
    【单元测试】
    Pen Editor
    appendGrid
    动画
    JavaScript框架设计 第14章 动画引擎
    >>>
  • 原文地址:https://www.cnblogs.com/snowhite/p/9178104.html
Copyright © 2011-2022 走看看