1、柱状图中柱子上的渐变色的实现
配置： series[i]-bar.itemStyle.normal下的color值new echarts.graphic.LinearGradient()
series: [
{
name: ' ',
type: 'bar',
barGap: '-100%',
barWidth: '60%',
data: [310, 0, 0, 0, 0],
itemStyle: { //设置渐变色
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#62d2d3'},
{offset: 1, color: '#4ba9a9'}
]),
barBorderRadius: 2 //柱状角成椭圆形
}
}
}
渐变色效果
2、类似进度条的柱图
原理就是添加series系列，在正常显示的柱图下添加一个系列，每一条柱子的数据都是最大
所以在定义option前，应先定义阴影部分的数组
var dataShadow =[]; //阴影部分的数组
var yMax = Math.max.apply(Math,data);
for (var i = 0; i < data1.length; i++) {
dataShadow1.push(yMax+10); //将正常显示的数组的最大值放入阴影数组
}
以下就是阴影series系列的配置
series: [
{ // For shadow
type: 'bar',
label: {
show: true,
color: fontColor,
position: 'right',
offset: [10, -2],
formatter: function(params){
return data[params.dataIndex];
}
},
itemStyle: {
normal: {
color: '#f5f5f5',
barBorderRadius: 2,
shadowColor: '#e0e0e0',
shadowBlur: 1,
shadowOffsetX: 0,
shadowOffsetY: -1,
}
},
barGap:'-100%',
barCategoryGap:'40%',
barWidth: '40%',
data: dataShadow
},
{……}//正常显示的柱图系列
3、饼图
echarts2 中的饼图可以用属性 option.calculable : true 来控制内外环线的式样，并且这个属性的作用是：是否启用拖拽重计算特性
带内外圆环的饼图
但是在echarts3 中并没有这种样式的直接属性配置项，那么就需要使用两个series系列来模拟内外这两个环
series: [
{ //外圆环
type: 'pie',
center: ['40%','50%'], //此处的圆心坐标应该与饼图的圆心坐标一至
radius: ['90%', '89.4%'], //半径，应比正常饼图的半径大
avoidLabelOverlap: false,//是否启用防止标签重叠策略
startAngle: 225,
hoverAnimation: false,
legendHoverLink: false,
label: {
normal: {
show: false,
position: 'center'
}
},
labelLine: {
normal: {
show: false
}
},
data: [100],
color: lineColor
},
{ //内圆环
type: 'pie',
center: ['40%','50%'],//此处的圆心坐标应该与饼图的圆心坐标一至
radius: ['50%', '49.4%'], //半径，应比正常的饼图的半径小
avoidLabelOverlap: false,//是否启用防止标签重叠策略
startAngle: 225,
hoverAnimation: false,
legendHoverLink: false,
label: {
normal: {
show: false,
position: 'center'
}
},
labelLine: {
normal: {
show: false
}
},
data: [100],
color: lineColor
},
{
name: "风险数量",
type:'pie',
center: ['40%','50%'],
radius: ['55%', '84%'],
clockwise: true, //是否开启顺时针
label: {
normal: {
show: false
}
},
labelLine: {
show: false
},
data: sectionData,
color: ['#ff7f50','#87cefa','#da70db','#32cd32','#6495ed','#ff69b4']
}
]
};
结果如下图
