echarts实现一个柱子二种颜色
时间: 2023-06-29 14:09:26 浏览: 64
要实现柱子二种颜色,可以使用 echarts 中的渐变色功能。下面是一个简单的示例代码:
```javascript
option = {
xAxis: {
type: 'category',
data: ['A', 'B', 'C', 'D', 'E', 'F']
},
yAxis: {
type: 'value'
},
series: [{
type: 'bar',
data: [30, 20, 50, 40, 60, 80],
itemStyle: {
// 使用渐变色
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#2f4554'},
{offset: 0.5, color: '#61a0a8'},
{offset: 1, color: '#c23531'}
]
)
}
}]
};
// 初始化图表
var myChart = echarts.init(document.getElementById('myChart'));
myChart.setOption(option);
```
上面的代码中,我们使用了 `echarts.graphic.LinearGradient` 构造函数来创建一个渐变色。渐变色的参数有四个,分别是起点横坐标、起点纵坐标、终点横坐标和终点纵坐标。在这里我们使用了从上到下的渐变,所以起点纵坐标为0,终点纵坐标为1。然后我们定义了三个颜色的位置和颜色值,表示从上往下的三个位置上的颜色分别是什么。
最后,我们将渐变色作为 `itemStyle` 属性中的 `color` 值传入,就可以实现柱子二种颜色的效果了。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![txt](https://img-home.csdnimg.cn/images/20210720083642.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)