接着上一篇文章補充一點項目中遇到的問題及解決方法
1、y軸正負軸調換
yAxis: {
inverse:
false
,
//y軸正負軸調換
},
2、去掉圖表背景線
yAxis: [
{
type:
'value'
,
name:
'占比'
,
splitLine:{
show:
false //背景橫線不顯示
},
}
]
3、y軸以百分比顯示
yAxis: [
{
type:
'value'
,
name:
'占比'
,
axisLabel: {
formatter:
'{value} %'
},
]
4、y軸刻度設置最小/最大值
yAxis : [
{
type :
'value'
,
minInterval: 1，
maxInterval:100
}
],
5、設置y軸刻度顯示保留幾位小數
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} ',
formatter: function (value, index) {
return value.toFixed(2); //保留兩位小數
}
}
},
6、餅圖文字在扇形內部顯示
series : [
label: {
normal: {
position: 'inner'
}
}
]
下面貼幾個最近做的echart的demo希望可以幫助到一些朋友
1、在圖表中添加平行於y軸和x軸的線以及趨勢線（如下圖）
代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <input type="text"> <div id="pic0" style="width: 600px;height:400px;"></div> <script src="js/echarts.js"></script> <script> var myChart14 = echarts.init(document.getElementById('pic0')); option14 = { title: { text: '未來一周氣溫變化', subtext: '純屬虛構' }, tooltip: { trigger: 'axis' }, xAxis: { type: 'category', boundaryGap: false, data: ['100','200','300','400','500','600','700'] }, yAxis: { type: 'value', axisLabel: { formatter: '{value} ' } }, series: [ { name:'最高氣溫', type:'line', data:[100, 200, 300, 400, 500, 600, 700] }, { //平行於y軸 name:'', type:'line', markLine: { name:'盈虧臨界點', symbol:'circle', lable:{ normal:{ show:true, position:'end', formatter:'盈虧臨界點' } }, data: [[ {coord:['400',0],value:1}, //{coord:[4,0],value:1},//此處的4不加引號表示橫坐標第幾個從0開始 {coord:['400',350],value:400}//如何獲取grid上側最大值，目前是寫死的 ]] } }, { //平行於x軸 name: '線', type: 'scatter', symbolSize: 20, markLine: { lable:{ normal:{ show:true, position:'end', formatter:'線' } }, data: [{ yAxis: 350, }] }, data: [], }, { name:'趨勢線', type:'line', //data:[0], markLine: { name:'aa1', data: [[ {name: '標線1起點', value: 0, coord:['100',700]}, {name: '標線1終點',value: 0, coord:['700',20]} ]] } } ] }; myChart14.setOption(option14); </script> </body> </html>
2、雙y坐標帶增量的柱狀圖+折線圖（如下圖)
代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="pic4" style="width: 1000px;height:400px;"></div> <script src="js/echarts.js"></script> <script> var myChart = echarts.init(document.getElementById('pic4')); option = { title: { }, tooltip: { trigger: 'axis' }, legend: { data:['需方','供方','需方平均','供方平均','結算平均價差','我方申報均價','我方成交申報'], bottom:'bottom' }, toolbox: { show: true, feature: { dataView: {readOnly: false}, restore: {}, saveAsImage: {} } }, dataZoom: { show: false, start: 0, end: 100 }, toolbox:{ show:false, }, xAxis: [ { type: 'category', boundaryGap: true, data: [] }, { type: 'category', boundaryGap: true, data:['需方','供方','需方平均','供方平均','結算平均價差','我方申報均價','我方成交申報'], } ], yAxis: [ { type: 'value', scale: true, boundaryGap: [0.2, 0.2] }, { type: 'value', scale: true, boundaryGap: [0.2, 0.2] } ], series: [ { name: '輔助', type: 'bar', stack: '總量', barWidth: '50%', itemStyle: { normal: { barBorderColor: 'rgba(0,0,0,0)', color: 'rgba(0,0,0,0)' }, emphasis: { barBorderColor: 'rgba(0,0,0,0)', color: 'rgba(0,0,0,0)' } }, data: [-12,-13,-14,-15,-16,-17,-18] }, { name: '需方', type: 'bar', stack: '總量', color:['#ecc29c'], barWidth: '50%', data:[-11,-12,-13,-14,-15,-16,-17] }, { name: '供方輔助', type: 'bar', stack: '總量1', clickable : true, itemStyle: { normal: { barBorderColor: 'rgba(0,0,0,0)', color: 'rgba(0,0,0,0)' }, emphasis: { barBorderColor: 'rgba(0,0,0,0)', color: 'rgba(0,0,0,0)' } }, data: [-4,-5,-6,-7,-8,-9,-10] }, { name:'供方', type:'bar', color:["#8fb3e7"], stack: '總量1', xAxisIndex: 1, yAxisIndex: 1, data:[-5,-6,-7,-8,-9,-1,-11] }, { name:'供方平均', type:'line', data:[-8,-11,-12,-13,-14,-15,-16] }, { name:'結算平均價差', type:'line', data:[-8,-9,-11,-12,-13,-14,-45] } ] }; myChart.setOption(option); </script> </body> </html>
3、一個div中放多個餅圖
代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #pic{ width:100%; height:800px; } </style> </head> <body> <div id="pic"></div> <script src="js/echarts.js"></script> <script> var mychart = echarts.init(document.getElementById('pic')) option = { title : { text: '', subtext: '', x:'center' }, tooltip : { trigger: 'item', formatter: "{a} {b} :{d}%", textStyle: { fontSize:14 } }, legend: { orient: 'vertical', left: 'left', data: ['優秀','通過','建議修改'] }, toolbox: { show: true, orient: 'vertical', left: 'right', top: 'center', feature: { dataView: {readOnly: false}, restore: {}, saveAsImage: {} } }, grid: [ {x: '0%',y: '25%', width: '100%', height: '40%'}, ], xAxis: [ { type: 'category', axisTick: { alignWithLabel: true }, axisLabel:{ interval:0 //設置間隔，0的時候全部顯示 }, data: ['合同數量（個）','合同電量（萬千瓦時）','合同總價（元）'] }, ], yAxis: [ {gridIndex: 0,name:'年級',show:false}, ], series : [ { title:'aaa', name: '合同數量（個）', type: 'pie', //roseType:'radius', radius : '33%', center: ['16.5%', '31%'], data:[ {value:5, name:'優秀'}, {value:32-5-14, name:'通過'}, {value:14, name:'建議修改'} ], label: { normal: { position: 'inner', formatter: '{c}份', textStyle: { color: '#ffffff', fontSize: 14 } } }, itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } }, { name: '合同電量（萬千瓦時）', type: 'pie', radius : '33%', center: ['50%', '31%'], data:[ {value:23, name:'優秀'}, {value:46-23, name:'通過'}, {value:13, name:'建議修改'}, /*{value:335, name:'3'}, {value:1548, name:'4'}*/ ], label: { normal: { position: 'inner', formatter: '{c}份', offset: [,100], textStyle: { color: '#ffffff', fontSize: 14 } } }, itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } }, { name: '合同總價（元）', type: 'pie', //roseType:'radius', radius : '33%', center: ['83.5%', '31%'], data:[ {value:0, name:'優秀'}, {value:0, name:'通過'}, {value:0, name:'建議修改'}, ], label: { normal: { position: 'inner', formatter: '{c}份', textStyle: { color: '#ffffff', fontSize: 14 } } }, itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; mychart.setOption(option); </script> </body> </html>
若有錯誤歡迎大家批評指正
上述內容是參照echarts官網http://echarts.baidu.com/,若有侵權請聯系，謝謝！
作者：BlancheWang
出處：http://www.cnblogs.com/hhw3
本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接。