echarts常用配置项

1.数据换行

tooltip: {formatter: "{b}:
{a}:{c}万元
{a1}:{c1}万元
{a2}:{c2}万元"} 
label: {formatter:  "{b}\n\n{c}" }

2.点击跳转添加

myChart.on('click', function(params) {
    console.log(params.name);
    window.open(params.data.url);
    // window.open('https://www.jianshu.com/u/c36612ea2ece' );
});

3.动态数据

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.添加水印

在前端设置样式然后添加到背景中             
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.数据下载及多图表转换

 toolbox: {
        show : true,
        orient: 'vertical',  #不填为水平，填写为垂直
        x: 'left',  #指图标放在x轴的左右
        y: 'center',#指图标放在y轴的上下
        feature : {
            mark : {show: true}, 
            dataZoom : {show: true},  #区域缩放
            dataView : {show: true, readOnly: false}, #数据预览
            magicType : {show: true, type: ['line', 'bar']},  #切换类型
            restore : {show: true},  #刷新
            saveAsImage : {show: true}  #保存
        }
    },

7.时间轴

    dataZoom : {
        show : true,
        realtime: true,
        start : 50,
        end : 100
    },

8.Y轴设置

"yAxisIndex": 1,  #设置多个轴
yAxis: [
    {
        type: 'value',  
        scale:true      #y轴自适应不从0开始
        barGap: '-100%',  #重合但不堆叠的柱形
                stack: '数据',  #堆积柱形图
        name: '水量',
        min: 0,     #y轴最大最小值
        max: 250,
        interval: 50,   #数值刻度
}

9.矩形树图：

#第一层用name命名
"roam": true,  #树图的缩放与平移
"drillDownIcon": "",  # 自定义下钻的符号
"breadcrumb": {
                    "left": "15%",
                    "top": "0%"
                },  #面包屑每层的路径

10.词云图

字体与其显示框内容不对应鼠标识别错误,就是option里的数据要对value降序排序（这一点很关键，是必须的一步）
把字符串中的间距调大点 textPadding: 10

11.标记点和参考线

#标记数据点
"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":"预测数值","xAxis":4,"yAxis":0}    #对指定位置进行标记
                    ]
                },
#标记参考线
"markLine":{ "data" : [
                    {"type" : "average", "name": '平均值'}
                ]}

12.颜色渐变

itemStyle: {
                normal: {
                    color: { // 颜色渐变
                        colorStops: [{
                                    offset: 0,
                                    color: '#4FADFD' // 0% 处的颜色
                                }, {
                                    offset: 1,
                                    color: '#28E8FA' // 100% 处的颜色1
                                }]
                    }
                }
            }