炫意html5
最早CSS3和HTML5移动技术网站之一

ECharts – echarts改变柱状图每个柱子的颜色

echarts改变柱状图每个柱子的颜色

在实际使用ECharts时,我们常常需要使不同的数据用不的颜色来加以区分,那么我们该如何设置呢?

实例

我们以树懒课堂7月访问设备类型统计这一实例为例:

源代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="https://www.shulanxt.com/visualization/echarts/bar-colour/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '树懒课堂7月访问设备类型统计'
},
xAxis: {
data: ["苹果","小米","华为","其他"]
},
yAxis: {
splitLine:{ show:false}  //改设置不显示坐标区域内的y轴分割线
},
series: [{
name: '手机品牌',
type: 'bar',
data: [19, 15, 40, 32],
//设置柱子的宽度
barWidth : 30,
//配置样式
}],
     //控制边距 
grid: {
left: '0%',
right:'10%',
containLabel: true,
},
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>

效果如下图所示:

itemStyle

  • 我们可以通过itemStyle的子属性来设置:
  • itemStyle的部分常用子属性及其功能如下:

series-bar. itemStyle

  • 图形样式。

series-bar.itemStyle. color = 自适应

  • 柱条的颜色。 默认从全局调色盘 option.color 获取颜色

series-bar.itemStyle. borderColor = ‘#000’

  • 柱条的描边颜色。

series-bar.itemStyle. borderWidth

  • 柱条的描边宽度,默认不描边。

series-bar.itemStyle. borderType = ‘solid’

  • 柱条的描边类型,默认为实线,支持 ‘dashed’, ‘dotted’。

series-bar.itemStyle. barBorderRadius

  • 圆角半径,单位px,支持传入数组分别指定 4 个圆角半径。 如:

barBorderRadius: 5, // 统一设置四个角的圆角大小

  • barBorderRadius: [5, 5, 0, 0] //(顺时针左上,右上,右下,左下)

series-bar.itemStyle. shadowBlur

  • 图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
  • 示例:
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}

series-bar.itemStyle. shadowColor

  • 阴影颜色。支持的格式同color。

故我们可以通过修改series-bar.itemStyle. color这个属性来对柱子颜色进行设置。

使用函数

我们要设置的柱子有多个,我们可以写一个函数来完成设置。

修改完成后的代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="https://www.shulanxt.com/visualization/echarts/bar-colour/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '树懒课堂7月访问设备类型统计'
},
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,
},
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>

效果如下图所示:

改变每个柱子的颜色成功!

炫意HTML5 » ECharts – echarts改变柱状图每个柱子的颜色

Java基础教程Android基础教程