折线图，多个柱子和线形图
代码：
var option = {
tooltip : {
trigger: 'axis'
},
toolbox: {
show : true,
color : ['#000000','#22bb22','#4b0082','#d2691e'],
y:'bottom',
// x : 'left',
feature : {
mark : {show: false},
dataView : {show: false, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
legend: {
y:'top',
data:['a','b','c','d','e','f','g','h']
},
grid:{borderWidth:0},
xAxis : [
//下x轴
{
type : 'category',
splitLine:'false',
axisLine: {//x轴
onZero:true,
lineStyle: {
color: '#000000',
type: 'solid',
width: 1
}
},
axisTick : { // x轴标记
show:true,
length: 2,
lineStyle: {
color: '#000000',
type: 'solid',
width: 1
}
},
data :d
},
//上x轴
{
type : 'category',
show:false,
splitLine:'false',
axisLine: {//x轴
onZero:true,
lineStyle: {
color: 'red',
type: 'solid',
width: 0
}
},
axisTick : { // x轴标记
show:false,
length: 2,
lineStyle: {
color: 'red',
type: 'solid',
width: 0
}
},
data :f
},
],
yAxis : [
//左y轴
{
type : 'value',
splitLine:'false',
name : '',
axisLine: {//y轴线
lineStyle: {
color: '#000000',
type: 'solid',
width: 1
}
},
axisLabel : {//y轴标签
formatter: '{value}万 '
}
},
//右y轴
{
type : 'value',
scale:true,
show : 'true',
splitLine:'false',
name : '',
axisLine: {//y轴
lineStyle: {
color: '#000000',
type: 'solid',
width: 1
}
},
axisLabel : {
formatter: '{value}%'
}
}
],
series : [
{
name:'a',
type:'bar',
barGap:'5%',
barCategoryGap:'15%',
itemStyle : { normal: {color:'#334B5C',label : {show: false, position: 'insideBottom',textStyle:{color:'#FFFFFF'}}}},
data:a
},
{
name:'b',
type:'bar',
itemStyle : { normal: {color:'#D53A35',label : {show: false, position: 'insideBottom',textStyle:{color:'#FFFFFF'}}}},
data:b
},
{
name:'c',
type:'bar',
itemStyle : { normal: {color:'#27727B',label : {show: false, position: 'insideBottom',textStyle:{color:'#FFFFFF'}}}},
data:g
},
{
name:'e',
type:'line',
symbol:'emptyCircle',
symbolSize: 2,
smooth:'true',
xAxisIndex: 0,
yAxisIndex: 1,
itemStyle : { normal: {color:'#CA8622',label : {show: false, position: 'top', formatter: '{c}%',textStyle:{color:'black'}}}},
data:e
},
{
name:'d',
type:'line',
symbol:'emptyCircle',
symbolSize: 2,
smooth:'true',
xAxisIndex: 0,
yAxisIndex: 1,
itemStyle : { normal: {color:'#9ACD32',label : {show: false, position: 'top', formatter: '{c}%',textStyle:{color:'black'}}}},
data:f
},
{
name:'f',
type:'line',
symbol:'emptyCircle',
symbolSize: 2,
smooth:'true',
xAxisIndex: 0,
yAxisIndex: 1,
itemStyle : { normal: {color:'#FCCE10',label : {show: false, position: 'top', formatter: '{c}%',textStyle:{color:'black'}}}},
data:h
},
{
name:'g',
type:'line',
symbol:'emptyCircle',
symbolSize: 2,
smooth:'true',
xAxisIndex: 0,
yAxisIndex: 1,
itemStyle : { normal: {color:'#61A0A8',label : {show: false, position: 'top', formatter: '{c}%',textStyle:{color:'black'}}}},
data:c
},
{
name:'h',
type:'line',
symbol:'emptyCircle',
symbolSize: 2,
smooth:'true',
xAxisIndex: 0,
yAxisIndex: 1,
itemStyle : { normal: {color:'#da70d6',label : {show: false, position: 'top', formatter: '{c}%',textStyle:{color:'black'}}}},
data:i
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
}
);
</script>
</body>
</html>效果图
本站文章版权归原作者及原出处所有 。内容为作者个人观点， 并不代表本站赞同其观点和对其真实性负责。本站是一个个人学习交流的平台，并不用于任何商业目的，如果有任何问题，请及时联系我们，我们将根据著作权人的要求，立即更正或者删除有关内容。本站拥有对此声明的最终解释权。