echart如下代码怎么让每个柱子上的文本块颜色不同
<!-- 此示例下载自 https://echarts.apache.org/examples/zh/editor.html?c=bar-waterfall --> <!DOCTYPE html> <html lang="zh-CN" 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="echarts.min.js"></script> <script type="text/javascript"> var dom = document.getElementById('container'); var myChart = echarts.init(dom, null, { renderer: 'canvas', useDirtyRect: false }); var app = {}; var option; option = { title: { text: 'Waterfall Chart',//主标题文本超链接 subtext: 'Living Expenses in Shenzhen'//副标题文本超链接。 }, tooltip: { trigger: 'axis', axisPointer: { type: 'shadow'//指示器类型 阴影指示器 }, formatter: function (params) { var tar = params[1]; return tar.name + '' + tar.seriesName + ' : ' + tar.value; } }, grid: { left: '3%',//grid 组件离容器左侧的距离。 right: '4%', bottom: '3%', containLabel: true }, xAxis: { type: 'category', splitLine: { show: false }, data: ['Total', 'Rent', 'Utilities', 'Transportation', 'Meals', 'Other'] }, yAxis: { show: false // type: 'value' }, series: [ { name: 'Placeholder', type: 'bar', stack: 'Total', itemStyle: { borderColor: 'transparent', color: 'transparent', // 红色 // borderRadius: [0, 20, 20, 0], }, emphasis: { itemStyle: { borderColor: 'transparent', color: 'transparent' } }, data: [0, 1700, 1400, 1200, 300, 0] }, { name: 'Life Cost', type: 'bar', stack: 'Total', label: { show: true, position: 'inside', color: 'black', // 黑色 fontWeight: 'bold', textStyle: { width: 70, // 设置宽度 height: 30 // 设置高度 }, backgroundColor: 'rgba(9,255,6,255)' , // backgroundColor : function(params){ // var colorList =['#9df5s4','#9df5s4','#9df5s4','#9df5s4','#9df5s4','#9df5s4']; // return colorList[params.dataIndex]; //}
// rich:{ // width:'50%', // height:'50%',}, }, itemStyle: { borderRadius: [10, 10, 10, 10],// 设置圆角 color: function (params) { var colorList = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#c9a665', '#9df5s4']; return colorList[params.dataIndex]; }, }, borderColor: 'red', data: [2900, 1200, 300, 200, 900, 300] } ] }; if (option && typeof option === 'object') { myChart.setOption(option); } window.addEventListener('resize', myChart.resize); </script> </body> </html> |
1min目标场景问卷
立即参与
最佳回答 |
||||
|
0
|
|
|||
|
0
|
|
|||
