来自eCharts的不同颜色条形图

Gof*_*fer 12 javascript echarts

我试图创建一个不同的颜色栏.对于Mon blue,Tue red,Wed green.请帮我怎么写.Line itemStyle: {normal: {color: 'blue','red', 'green'}}, 不工作.
代码来自echarts网站.

 <html style="height: 100%">
       <head>
           <meta charset="utf-8">
       </head>
       <body style="height: 100%; margin: 0">
           <div id="container" style="height: 100%"></div>
           <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
           <script type="text/javascript">
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    option = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            itemStyle: {normal: {color: 'blue'}},
            data: [120, 200, 150],
            type: 'bar'
        }]
    };
    ;
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
           </script>
       </body>
    </html>
Run Code Online (Sandbox Code Playgroud)

cou*_*one 19

这是我的解决方案:

    var option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [
            {
                value: 120,
                itemStyle: {color: 'blue'},
            },
            {
                value: 200,
                itemStyle: {color: 'red'},
            },
            {
                value: 150,
                itemStyle: {color: 'green'},
            }
        ],
        type: 'bar'
    }],
    graph: {
        color: colorPalette
    }
};
Run Code Online (Sandbox Code Playgroud)

https://plnkr.co/edit/vFK1qeMfMCXGx8Gdn1d8?p=preview

  • 我认为文档是很好的资源:https://ecomfe.github.io/echarts-doc/public/en/api.html#echarts (2认同)

小智 8

最佳解决方案对我不起作用。从他们的文档来看,似乎 lineStyle 现在有两个子元素,您可以利用“正常”和“强调”。我不得不像这样修改它以覆盖默认颜色:

    var option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [
            {
                value: 120,
                itemStyle: { normal: { color: 'blue' } },
            },
            {
                value: 200,
                itemStyle: { normal: { color: 'red' } },
            },
            {
                value: 150,
                itemStyle: { normal: { color: 'green' } },
            }
        ],
        type: 'bar'
    }],
    graph: {
        color: colorPalette
    }
};
Run Code Online (Sandbox Code Playgroud)