1.數(shù)據(jù)換行
tooltip: {formatter: ":<br/>{a}:{c}萬元<br/>{a1}:{c1}萬元<br/>{a2}:{c2}萬元"}
label: {formatter: "\n\n{c}" }
2.點擊跳轉(zhuǎn)添加
myChart.on('click', function(params) {
console.log(params.name);
window.open(params.data.url);
// window.open('http://www.reibang.com/u/c36612ea2ece' );
});
3.動態(tài)數(shù)據(jù)
setInterval(function() {
echarts.util.each(option.series[0].data, function(item) {
item[0] += Math.random();
if (item[0] > 26) {
item[0] = 26;
}
});
myChart.setOption(option);
}, 500)
4.地圖
js和json文件下載地址
https://echarts.apache.org/examples/vendors/echarts/map/
5.添加水印
在前端設(shè)置樣式然后添加到背景中
var waterMarkText = 'ECHARTS'; //水印名稱
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d'); //水印畫布
canvas.width = canvas.height =100; //水印高寬
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.globalAlpha = 0.1; //水印透明度
ctx.font = '20px Microsoft Yahei'; //水印字體
ctx.translate(50, 50); //水印完整性
// ctx.rotate(-Math.PI / 4);
ctx.fillText(waterMarkText, 0, 0);//水印顯示情況
在option中添加水印背景
backgroundColor: {
type: 'pattern',
image: canvas,
repeat: 'repeat'
},
6.數(shù)據(jù)下載及多圖表轉(zhuǎn)換
toolbox: {
show : true,
orient: 'vertical', #不填為水平村视，填寫為垂直
x: 'left', #指圖標(biāo)放在x軸的左右
y: 'center',#指圖標(biāo)放在y軸的上下
feature : {
mark : {show: true},
dataZoom : {show: true}, #區(qū)域縮放
dataView : {show: true, readOnly: false}, #數(shù)據(jù)預(yù)覽
magicType : {show: true, type: ['line', 'bar']}, #切換類型
restore : {show: true}, #刷新
saveAsImage : {show: true} #保存
}
},
7.時間軸
dataZoom : {
show : true,
realtime: true,
start : 50,
end : 100
},
8.Y軸設(shè)置
"yAxisIndex": 1, #設(shè)置多個軸
yAxis: [
{
type: 'value',
scale:true #y軸自適應(yīng)不從0開始
barGap: '-100%', #重合但不堆疊的柱形
stack: '數(shù)據(jù)', #堆積柱形圖
name: '水量',
min: 0, #y軸最大最小值
max: 250,
interval: 50, #數(shù)值刻度
}
9.矩形樹圖：
#第一層用name命名
"roam": true, #樹圖的縮放與平移
"drillDownIcon": "", # 自定義下鉆的符號
"breadcrumb": {
"left": "15%",
"top": "0%"
}, #面包屑每層的路徑
10.詞云圖
字體與其顯示框內(nèi)容不對應(yīng)鼠標(biāo)識別錯誤,就是option里的數(shù)據(jù)要對value降序排序（這一點很關(guān)鍵斧拍，是必須的一步）
把字符串中的間距調(diào)大點 textPadding: 10
11.標(biāo)記點和參考線
#標(biāo)記數(shù)據(jù)點
"markPoint": {
// symbolOffset: [50, 60], #偏移
symbol: 'path://m 0,0 h 48 v 20 h -30 l -6,10 l -6,-10 h -6 z', #箭頭文本框
symbol:'path://M5, 20 L5,5 L8,8 L5,2 L2,8 L5,5 L5.3,6 L5.3,20 ',#箭頭
"data": [
{
"type": "max",
"name": "最大值"
},
{"value":"預(yù)測數(shù)值","xAxis":4,"yAxis":0} #對指定位置進(jìn)行標(biāo)記
]
},
#標(biāo)記參考線
"markLine":{ "data" : [
{"type" : "average", "name": '平均值'}
]}
12.顏色漸變
itemStyle: {
normal: {
color: { // 顏色漸變
colorStops: [{
offset: 0,
color: '#4FADFD' // 0% 處的顏色
}, {
offset: 1,
color: '#28E8FA' // 100% 處的顏色1
}]
}
}
}
