echarts相關設置
阿新 • • 發佈:2018-12-28
ext als readonly png lse turn 6.4 trigge 柱狀圖
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
echarts相關設置