echarts相關設定
阿新 • • 發佈:2018-12-28
1.顯示隱藏工具欄
註釋toolbox即可
/* toolbox: { show : true, feature : { dataView : {show: true, readOnly: false}, magicType : {show: true, type: ['line', 'bar']}, restore : {show: true}, saveAsImage : {show: true} } },*/
2.滑鼠劃過資料顯示對應的資料
tooltip : {
trigger: 'axis'//設定這個即可 劃過顯示資料
},
3.修改不同產品分類(legend)的樣式
textStyle: {
fontSize: 12,
color: '#fff'//顯示的字型顏色
}
4.修改圖示的位置
grid: { show: true, left: 35, //元件離容器左側的距離,百分比字串或整型數字 top: 25, //元件離容器上側的距離,百分比字串或整型數字 //bottom:40//元件離容器底部的距離,百分比字串或整型數字 },
5.柱狀圖中的柱狀樣式
var labelOption = { normal: { show: true, position: 'top',//資料顯示在柱狀體的位置 align: 'middle', verticalAlign: 'bottom', formatter: '{c}', fontSize: 14, color: '#fff', rotate: 35,//顯示資料旋轉的角度 fontWeight: 'normal', } }; 使用: series : [ { name:'07010011', type:'bar', data:[800, 530, 520, 512, 480], color:'#7BB0E4', label:labelOption }, { name:'90612011', type:'bar', data:[180, 460, 9.0, 26.4, 28.7], color:'#404048', label:labelOption }, { name:'07810011', type:'bar', data:[2.6, 5.9, 9.0, 26.4, 28.7], color:'#8DEC6E', label:labelOption }, ]
6.修改y座標的資料資訊
1>資料固定
在 yAxis 增加max 和min 屬性
yAxis: {
type: 'value',
max:1000,
min:0,
...
}
2>資料大小不固定
在 yAxis 的 axisLabel中增加
formatter: function formatter(value, index) {
//使用函式模板,函式引數分別為刻度數值(類目),刻度的索引
if (value >= 250) {
value = (value + "").slice(0, -3);
return value + "K";
} else {
return value;
}
},
來源:https://blog.csdn.net/sinat_32900379/article/details/85157730