1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > echarts实现双纵轴的柱形图-折线图

echarts实现双纵轴的柱形图-折线图

时间:2020-11-24 17:14:21

相关推荐

echarts实现双纵轴的柱形图-折线图

echarts实现双纵轴的柱形图-折线图

<div class="satisfied" id="satisfied" style="width:500px;height:500px;"></div>

let satisfied = echarts.init(document.getElementById("satisfied"),'dark');let optionsSatisfied = {title: {left:"40%",top:'5%',text: '呼出情况',color:'blue',textStyle:{fontSize:'18',fontFamily: 'Arial',textBorderType: [5, 10],textBorderDashOffset: 5,textBorderType: 'solid'}},xAxis: {type: 'category',data: ['咨询', '报案', '回访','质检','投诉','人员'],splitArea:{show:false},axisLabel:{interval:0,rotate:"30"},splitLine:{show: false}},yAxis:[ {type: 'value',splitArea:{show:false},splitLine:{show: false}, position:'left',yAxisIndex:0,},{type: 'value', name: '接起率',min: 0,max: 100,interval: 20(ps:'刻度间距'),axisLabel: {formatter: '{value}%'}}],series: [{data: [35, 40, 25,10,34,18],type: 'bar',name:'呼出量',barWidth: '20%',color:'#5b9bd5',label:{show:true,position:'top'}},{data: [45, 25, 30,50,25,30],type: 'bar',name:'呼出接通量',barWidth: '20%',color:'orange',label:{show:true,position:'top'}},{type: 'line',data: [20, 40, 33, 45,70,38],name:'接起率',label: {normal: {show: true,position:'top'},},yAxisIndex: 1(ps:如果没有这个属性,或者这个属性的值为0,数值将按照左侧的纵轴为主),tooltip: {valueFormatter: function (value) {return value + '%'; }},},],grid:{left:"10%",right:"10%",top:"15%",bottom:'20%'},legend: {data: ['呼出量', '呼出接通量','接起率'],left:"20%",right:"20%",bottom:"2%"},}//使用制定的配置项和数据显示图表satisfied.setOption(optionsSatisfied);

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。