1、横向柱状图
series: [{
type: 'bar',
barCategoryGap:'88%',
barWidth:13,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 1, 0,
[
{offset: 0, color: '#58F3E1'},
{offset: 1, color: '#4EAACC'}
]
)
},
label:{
show:true, //数据是否显示
position:'right', //数据显示位置,可设置right,top等
color:'#fff'
}
},
}]
barWidth:柱状图大小。
barGap: '-50%', 柱图间距。
0,0,1,0, 表示从左向右变化。0,0,0,1, 表示从右向左变化。
offset: 0, color: '#58F3E1' 0% 处的颜色
offset: 1, color: '#58F3E1' 100% 处的颜色
2、横向柱状图 ,并显示对应数据。
var option = {
grid: {
left: '1%',
right: '15%',
bottom: '3%',
containLabel: true
},
xAxis:{
type : 'value',
name:'单位:个',
axisLine: {
show: true, //是否显示
lineStyle: {
color: '#58F3E1', //x轴颜色
}
},
splitLine: {
show: true, //x轴切割线是否显示
lineStyle: {
color: '#58F3E1' //x轴切割线颜色
}
},
axisTick:{ //x轴刻度线
show:false
},
axisLabel: {
show: true,
textStyle: {
color:'#fff'
}
},
},
yAxis: {
type: 'category',
name:'月',
data : ['10', '11', '12', '1', '2', '3'],
// max:6,
nameTextStyle:{
color:'#fff',
fontSize:10
// padding: [-5,30,5,0]
},
splitNumber:4,
axisLabel: {
show: true,
interval: 0,
textStyle:{
color:'#fff'
}
},
axisTick:{ //y轴刻度线
show:false
},
axisLine: {
show: true, //是否显示
lineStyle: {
color: '#58F3E1' //y轴颜色
}
},
},
series: [{
data:[40, 85, 55, 28, 62, 44],
type: 'bar',
barCategoryGap:'88%',
barWidth:13, //柱状的大小
label:{
normal:{
show:true,
position:'right'
}
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 1, 0,
[
{offset: 0, color: '#58F3E1'}, //柱状图从左向右颜色渐变
{offset: 1, color: '#4EAACC'}
]
),
label : {
textStyle : {
fontSize : '9', //柱状上的显示的文字
color:'#fff'
}
}
},
},
}]
};
3、柱状图设置圆角
barBorderRadius:[10, 10, 10, 10]
4、柱状图顶部显示数据 (数据可以加%)
在series中:
label : {
show:true, //是否显示数据
position:"top", //显示位置,例如:柱状图顶部
formatter:'{c}%', //数据可显示为%,例如:30%
textStyle:{
color:'#fff',
fontSize:7
} },
5、折线区域颜色渐变
var option = {
xAxis: {
type: 'category',
boundaryGap: false, //false 代表从0刻度开始。true代表离0刻度有一段距离
data: ['10', '11', '12', '1', '2', '3'],
name:'月',
nameTextStyle:{
color:'#fff'
},
axisLine: {
show: true,
lineStyle: {
color: '#58f3e1',
}
},
axisTick:{ //x轴刻度线
show:false
},
axisLabel: {
show: true,
textStyle: {
color:'#fff'
}
},
},
yAxis: {
type: 'value',
name:'次',
nameTextStyle:{
color:'#fff',
fontSize:10,
padding: [-5,30,5,0]
},
splitNumber:6,
axisLabel: {
show: true,
interval: 'auto'
},
axisLine: {
show: true,
lineStyle: {
color: '#58f3e1'
}
},
axisTick:{ //y轴刻度线
show:false
},
splitLine: {
show: false,
lineStyle: {
color: '#58F3E1'
}
},
axisLabel: {
show: true,
textStyle: {
color:'#fff'
}
},
},
series: [{
symbol: "none",
smooth: true, //平滑曲线
data: [8, 10, 3, 7, 6, 2],
type: 'line',
areaStyle: {normal: {}}, //区域样式
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient( //折线区域 颜色渐变
0, 0, 0, 1,
[
{offset: 0, color: '#D4D20B'},
{offset: 0.5, color: '#4BD5CF'},
{offset: 1, color: '#4BD5CF'}
]
)
// color: "#58f3e1",
// width:6,
// height:6,
// lineStyle: {
// color: "#58f3e1"
// }
}
},
}]
};
6、去掉折线上面的小圆点,折线颜色,折点处显示数据
series: [{
symbol: "none", //折点显示设置为true,隐藏设置为none
itemStyle:{
normal:{
lineStyle:{
color:'#B891FF' //改变折线颜色
};
label:{
show:true, //折点处显示数据
textStyle:{
color:'#fff', //字体颜色
fontSize:9 //字体大小
}
}
}
}
}]
7、设置折点形状,大小,颜色,设置折点的填充颜色
series: [
{
name: "种类",
type: "line", //折线
symbol: 'circle',//折线点设置为实心点
symbolSize: 4, //折线点的大小
itemStyle: {
normal: {
color: "#58F3E1",//折线点的颜色
lineStyle: {
color: "#58F3E1"//折线的颜色
}
}
},
]
//填充折点颜色
series[
{
symbol: 'circle',
itemStyle: {
normal: {
color: "#fff",
borderColor: '#58F3E1',
borderWidth: 2,
}
},
}]
color:也是圆的填充色,
borderColor:圆的border
borderWidth: 圆border的宽度
8、legend 动态控制xAxis 数据
var problemData = ['问题1','问题2','问题3','问题4','问题5','问题6','问题7','问题8','问题9','问题10'];
var timeData = ["2018年1月","2018年1月","2018年1月","2018年1月","2018年1月","2018年1月","2018年1月","2018年1月","2018年1月","2018年1月",];
var chartThree = document.getElementById("problemTrendChart");
var myChartThree = echarts.init(chartThree);
myChartThree.setOption({
legend: {
icon:"none",
data:['时间', '种类'],
selectedMode: "single", // 单选
selected: {
时间: true,
种类: false
},
right:"3%",
itemWidth: 10, // 设置宽度
itemHeight: 32, // 设置高度
itemGap: 8, // 设置间距
textStyle: {
fontSize: 7,
color: '#fff'
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data:problemData,
name:'月',
nameTextStyle:{
color:'#fff',
fontSize:7
},
axisLine: {
show: true,
lineStyle: {
color: '#3698D1',
}
},
axisTick:{ //x轴刻度线
show:false
},
axisLabel: {
show: true,
textStyle: {
color:'#fff'
}
},
},
yAxis: {
type: 'value',
name:'单位:个',
gridIndex: 0,
min: 0,
max: 150,
splitNumber: 4,
nameTextStyle:{
color:'#fff',
fontSize:7
// padding: [-5,30,5,0]
},
axisLabel: {
show: true,
interval: 'auto',
// formatter: '{value} %'
},
axisLine: {
show: true,
lineStyle: {
color: '#3698D1'
}
},
axisTick:{ //y轴刻度线
show:true
},
splitLine: {
show: false,
lineStyle: {
color: '#58F3E1'
}
},
axisLabel: {
show: true,
textStyle: {
color:'#fff'
}
},
},
series: [
{
name:"种类",
symbol: "none", //折点
smooth:true,
data: ["40","75","100","115","20","40","100","20","100","115"],
type: 'line',
areaStyle: {normal: {}},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#EE7FFF'},
{offset: 0.8, color: '#2C76B0'},
{offset: 1, color: '#2C76B0'}
]
),
label : {
show:true,
textStyle:{
color:'#fff',
fontSize:9
}
},
lineStyle:{
color:'#B891FF' //改变折线颜色
}
}
},
},
{
name:"时间",
symbol: "none", //折点
smooth:true,
data: ["50","80","60","115","40","80","100","20","100","115"],
type: 'line',
areaStyle: {normal: {}},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#0EADA5'},
{offset: 0.8, color: '#2C76B0'},
{offset: 1, color: '#2C76B0'}
]
),
label : {
show:true,
textStyle:{
color:'#fff',
fontSize:9
}
},
lineStyle:{
color:'#B891FF' //改变折线颜色
}
}
},
},
]
});
myChartThree.on('legendselectchanged', function(obj) {
var name=obj.name;
console.log("2222222222222")
var option=myChartThree.getOption();
if(name=='种类'){
option.xAxis[0].data=problemData;
}else if(name=='时间'){
option.xAxis[0].data=timeData;
}
myChartThree.setOption(option,true);
});
上边的代码icon类型为none,因为此项目中不需要显示icon。
icon: "circle" 类型包括 circle,rect ,roundRect,triangle,diamond,pin,arrow,none
right: "3%" 设置icon的位置
itemWidth: 10 设置宽度
itemHeight: 10 设置高度
itemGap: 40 设置间距
个人原因没有做成gif图,大家可自行参考。