echarts学习

1.echarts属性的设置

1.1 转载

https://www.cnblogs.com/benmumu/p/8316652.html

1.2 介绍

各系列图查询官方链接

// 全图默认背景 
// backgroundColor: ‘rgba(0,0,0,0)’,
// 默认色板
color: ['#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed',
    '#ff69b4','#ba55d3','#cd5c5c','#ffa500','#40e0d0',
    '#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700',
    '#6699FF','#ff6666','#3cb371','#b8860b','#30e0e0'],
 
// 图表标题
title: {
    x: 'left',                // 水平安放位置，默认为左对齐，可选为：
                      // 'center' ¦ 'left' ¦ 'right'
                      // ¦ {number}（x坐标，单位px）
    y: 'top',             // 垂直安放位置，默认为全图顶端，可选为：
                      // 'top' ¦ 'bottom' ¦ 'center'
                      // ¦ {number}（y坐标，单位px）
    //textAlign: null          // 水平对齐方式，默认根据x设置自动调整
    backgroundColor: 'rgba(0,0,0,0)',
    borderColor: '#ccc',          // 标题边框颜色
    borderWidth: 0,           // 标题边框线宽，单位px，默认为0（无边框）
    padding: 5,             // 标题内边距，单位px，默认各方向内边距为5，
                              // 接受数组分别设定上右下左边距，同css
    itemGap: 10,             // 主副标题纵向间隔，单位px，默认为10，
    textStyle: {
        fontSize: 18,
        fontWeight: 'bolder',
        color: '#333'                             // 主标题文字颜色
    },
    subtextStyle: {
        color: '#aaa'                            // 副标题文字颜色
    }
},
 
// 图例
legend: {
    orient: 'horizontal',          // 布局方式，默认为水平布局，可选为：
                       // 'horizontal' ¦ 'vertical'
    x: 'center',                // 水平安放位置，默认为全图居中，可选为：
                              // 'center' ¦ 'left' ¦ 'right'
                       // ¦ {number}（x坐标，单位px）
    y: 'top',              // 垂直安放位置，默认为全图顶端，可选为：
                       // 'top' ¦ 'bottom' ¦ 'center'
                       // ¦ {number}（y坐标，单位px）
    backgroundColor: 'rgba(0,0,0,0)',
    borderColor: '#ccc',            // 图例边框颜色
    borderWidth: 0,                // 图例边框线宽，单位px，默认为0（无边框）
    padding: 5,                  // 图例内边距，单位px，默认各方向内边距为5，
                               // 接受数组分别设定上右下左边距，同css
    itemGap: 10,              // 各个item之间的间隔，单位px，默认为10，
                        // 横向布局时为水平间隔，纵向布局时为纵向间隔
    itemWidth: 20,             // 图例图形宽度
    itemHeight: 14,            // 图例图形高度
    textStyle: {
        color: '#333'                              // 图例文字颜色
    }
},
 
// 值域
dataRange: {
    orient: 'vertical',             // 布局方式，默认为垂直布局，可选为：
                        // 'horizontal' ¦ 'vertical'
    x: 'left',                   // 水平安放位置，默认为全图左对齐，可选为：
                        // 'center' ¦ 'left' ¦ 'right'
                        // ¦ {number}（x坐标，单位px）
    y: 'bottom',                  // 垂直安放位置，默认为全图底部，可选为：
                         // 'top' ¦ 'bottom' ¦ 'center'
                         // ¦ {number}（y坐标，单位px）
    backgroundColor: 'rgba(0,0,0,0)',
    borderColor: '#ccc',             // 值域边框颜色
    borderWidth: 0,                 // 值域边框线宽，单位px，默认为0（无边框）
    padding: 5,                    // 值域内边距，单位px，默认各方向内边距为5，
                         // 接受数组分别设定上右下左边距，同css
    itemGap: 10,               // 各个item之间的间隔，单位px，默认为10，
                        // 横向布局时为水平间隔，纵向布局时为纵向间隔
    itemWidth: 20,             // 值域图形宽度，线性渐变水平布局宽度为该值 * 10
    itemHeight: 14,            // 值域图形高度，线性渐变垂直布局高度为该值 * 10
    splitNumber: 5,            // 分割段数，默认为5，为0时为线性渐变
    color:['#1e90ff','#f0ffff'],//颜色
    //text:['高','低'],              // 文本，默认为数值文本
    textStyle: {
        color: '#333'                                // 值域文字颜色
    }
},
 
toolbox: {
    orient: 'horizontal',            // 布局方式，默认为水平布局，可选为：
                        // 'horizontal' ¦ 'vertical'
    x: 'right',              // 水平安放位置，默认为全图右对齐，可选为：
                        // 'center' ¦ 'left' ¦ 'right'
                        // ¦ {number}（x坐标，单位px）
    y: 'top',               // 垂直安放位置，默认为全图顶端，可选为：
                        // 'top' ¦ 'bottom' ¦ 'center'
                        // ¦ {number}（y坐标，单位px）
    color : ['#1e90ff','#22bb22','#4b0082','#d2691e'],
    backgroundColor: 'rgba(0,0,0,0)',    // 工具箱背景颜色
    borderColor: '#ccc',             // 工具箱边框颜色
    borderWidth: 0,                 // 工具箱边框线宽，单位px，默认为0（无边框）
    padding: 5,                    // 工具箱内边距，单位px，默认各方向内边距为5，
                                // 接受数组分别设定上右下左边距，同css
    itemGap: 10,                  // 各个item之间的间隔，单位px，默认为10，
                                // 横向布局时为水平间隔，纵向布局时为纵向间隔
    itemSize: 16,              // 工具箱图形宽度
    featureImageIcon : {},            // 自定义图片icon
    featureTitle : {
        mark : '辅助线开关',
        markUndo : '删除辅助线',
        markClear : '清空辅助线',
        dataZoom : '区域缩放',
        dataZoomReset : '区域缩放后退',
        dataView : '数据视图',
        lineChart : '折线图切换',
        barChart : '柱形图切换',
        restore : '还原',
        saveAsImage : '保存为图片'
    }
},
 
// 提示框
tooltip: {
    trigger: 'item',           // 触发类型，默认数据触发，见下图，可选为：'item' ¦ 'axis'
    showDelay: 20,             // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
    hideDelay: 100,            // 隐藏延迟，单位ms
    transitionDuration : 0.4,         // 动画变换时间，单位s
    backgroundColor: 'rgba(0,0,0,0.7)',  // 提示背景颜色，默认为透明度为0.7的黑色
    borderColor: '#333',            // 提示边框颜色
    borderRadius: 4,                // 提示边框圆角，单位px，默认为4
    borderWidth: 0,                // 提示边框线宽，单位px，默认为0（无边框）
    padding: 5,                   // 提示内边距，单位px，默认各方向内边距为5，
                                // 接受数组分别设定上右下左边距，同css
    axisPointer : {                 // 坐标轴指示器，坐标轴触发有效
        type : 'line',         // 默认为直线，可选为：'line' | 'shadow'
        lineStyle : {          // 直线指示器样式设置
            color: '#48b',
            width: 2,
            type: 'solid'
        },
        shadowStyle : {              // 阴影指示器样式设置
            width: 'auto',         // 阴影大小
            color: 'rgba(150,150,150,0.3)'  // 阴影颜色
        }
    },
    textStyle: {
        color: '#fff'
    }
},
 
// 区域缩放控制器
dataZoom: {
    orient: 'horizontal',         // 布局方式，默认为水平布局，可选为：
                             // 'horizontal' ¦ 'vertical'
    // x: {number},              // 水平安放位置，默认为根据grid参数适配，可选为：
                             // {number}（x坐标，单位px）
    // y: {number},              // 垂直安放位置，默认为根据grid参数适配，可选为：
                             // {number}（y坐标，单位px）
    // width: {number},           // 指定宽度，横向布局时默认为根据grid参数适配
    // height: {number},          // 指定高度，纵向布局时默认为根据grid参数适配
    backgroundColor: 'rgba(0,0,0,0)',    // 背景颜色
    dataBackgroundColor: '#eee',       // 数据背景颜色
    fillerColor: 'rgba(144,197,237,0.2)', // 填充颜色
    handleColor: 'rgba(70,130,180,0.8)'       // 手柄颜色
},
 
// 网格
grid: {
    x: 80,
    y: 60,
    x2: 80,
    y2: 60,
    // width: {totalWidth} - x - x2,
    // height: {totalHeight} - y - y2,
    backgroundColor: 'rgba(0,0,0,0)',
    borderWidth: 1,
    borderColor: '#ccc'
},
 
// 类目轴
categoryAxis: {
    position: 'bottom',        // 位置
    nameLocation: 'end',      // 坐标轴名字位置，支持'start' | 'end'
    boundaryGap: true,     // 类目起始和结束两端空白策略
    axisLine: {            // 坐标轴线
        show: true,         // 默认显示，属性show控制显示与否
        lineStyle: {        // 属性lineStyle控制线条样式
            color: '#48b',
            width: 2,
            type: 'solid'
        }
    },
    axisTick: {            // 坐标轴小标记
        show: true,       // 属性show控制显示与否，默认不显示
        interval: 'auto',
        // onGap: null,
        inside : false,        // 控制小标记是否在grid里
        length :5,         // 属性length控制线长
        lineStyle: {       // 属性lineStyle控制线条样式
            color: '#333',
            width: 1
        }
    },
    axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
        show: true,
        interval: 'auto',
        rotate: 0,
        margin: 8,
        // formatter: null,
        textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
            color: '#333'
        }
    },
    splitLine: {                // 分隔线
        show: true,        // 默认显示，属性show控制显示与否
        // onGap: null,
        lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
            color: ['#ccc'],
            width: 1,
            type: 'solid'
        }
    },
    splitArea: {                // 分隔区域
        show: false,       // 默认不显示，属性show控制显示与否
        // onGap: null,
        areaStyle: {        // 属性areaStyle（详见areaStyle）控制区域样式
            color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']
        }
    }
},
 
// 数值型坐标轴默认参数
valueAxis: {
    position: 'left',      // 位置
    nameLocation: 'end',     // 坐标轴名字位置，支持'start' | 'end'
    nameTextStyle: {},     // 坐标轴文字样式，默认取全局样式
    boundaryGap: [0, 0],    // 数值起始和结束两端空白策略
    splitNumber: 5,        // 分割段数，默认为5
    axisLine: {             // 坐标轴线
        show: true,      // 默认显示，属性show控制显示与否
        lineStyle: {      // 属性lineStyle控制线条样式
            color: '#48b',
            width: 2,
            type: 'solid'
        }
    },
    axisTick: {            // 坐标轴小标记
        show: false,       // 属性show控制显示与否，默认不显示
        inside : false,      // 控制小标记是否在grid里
        length :5,          // 属性length控制线长
        lineStyle: {       // 属性lineStyle控制线条样式
            color: '#333',
            width: 1
        }
    },
    axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
        show: true,
        rotate: 0,
        margin: 8,
        // formatter: null,
        textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
            color: '#333'
        }
    },
    splitLine: {                // 分隔线
        show: true,        // 默认显示，属性show控制显示与否
        lineStyle: {          // 属性lineStyle（详见lineStyle）控制线条样式
            color: ['#ccc'],
            width: 1,
            type: 'solid'
        }
    },
    splitArea: {                // 分隔区域
        show: false,       // 默认不显示，属性show控制显示与否
        areaStyle: {       // 属性areaStyle（详见areaStyle）控制区域样式
            color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']
        }
    }
},
 
polar : {
    center : ['50%', '50%'],    // 默认全局居中
    radius : '75%',
    startAngle : 90,
    splitNumber : 5,
    name : {
        show: true,
        textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
            color: '#333'
        }
    },
    axisLine: {            // 坐标轴线
        show: true,         // 默认显示，属性show控制显示与否
        lineStyle: {        // 属性lineStyle控制线条样式
            color: '#ccc',
            width: 1,
            type: 'solid'
        }
    },
    axisLabel: {                // 坐标轴文本标签，详见axis.axisLabel
        show: false,
        textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
            color: '#333'
        }
    },
    splitArea : {
        show : true,
        areaStyle : {
            color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']
        }
    },
    splitLine : {
        show : true,
        lineStyle : {
            width : 1,
            color : '#ccc'
        }
    }
},
 
// 柱形图默认参数
bar: {
    barMinHeight: 0,            // 最小高度改为0
    // barWidth: null,        // 默认自适应
    barGap: '30%',           // 柱间距离，默认为柱形宽度的30%，可设固定值
    barCategoryGap : '20%',   // 类目间柱形距离，默认为类目间距的20%，可设固定值
    itemStyle: {
        normal: {
            // color: '各异',
            barBorderColor: '#fff',         // 柱条边线
            barBorderRadius: 0,            // 柱条边线圆角，单位px，默认为0
            barBorderWidth: 1,             // 柱条边线线宽，单位px，默认为1
            label: {
                show: false
                                         // position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为
                                         // 'inside'|'left'|'right'|'top'|'bottom'
                                        // textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
            }
        },
        emphasis: {
            // color: '各异',
            barBorderColor: 'rgba(0,0,0,0)',            // 柱条边线
            barBorderRadius: 0,                // 柱条边线圆角，单位px，默认为0
            barBorderWidth: 1,                     // 柱条边线线宽，单位px，默认为1
            label: {
                show: false
                // position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为
                //           'inside'|'left'|'right'|'top'|'bottom'
                // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
            }
        }
    }
},
 
// 折线图默认参数
line: {
    itemStyle: {
        normal: {
            // color: 各异,
            label: {
                show: false
                // position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为
                //           'inside'|'left'|'right'|'top'|'bottom'
                // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
            },
            lineStyle: {
                width: 2,
                type: 'solid',
                shadowColor : 'rgba(0,0,0,0)', //默认透明
                shadowBlur: 5,
                shadowOffsetX: 3,
                shadowOffsetY: 3
            }
        },
        emphasis: {
            // color: 各异,
            label: {
                show: false
                // position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为
                //           'inside'|'left'|'right'|'top'|'bottom'
                // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
            }
        }
    },
    //smooth : false,
    //symbol: null,             // 拐点图形类型
    symbolSize: 2,          // 拐点图形大小
    //symbolRotate : null,       // 拐点图形旋转控制
    showAllSymbol: false                   // 标志图形默认只有主轴显示（随主轴标签间隔隐藏策略）
},
 
// K线图默认参数
k: {
    // barWidth : null              // 默认自适应
    // barMaxWidth : null           // 默认自适应
    itemStyle: {
        normal: {
            color: '#fff',      // 阳线填充颜色
            color0: '#00aa11',  // 阴线填充颜色
            lineStyle: {
                width: 1,
                color: '#ff3200',    // 阳线边框颜色
                color0: '#00aa11'          // 阴线边框颜色
            }
        },
        emphasis: {
            // color: 各异,
            // color0: 各异
        }
    }
},
 
// 散点图默认参数
scatter: {
    //symbol: null,         // 图形类型
    symbolSize: 4,       // 图形大小，半宽（半径）参数，当图形为方向或菱形则总宽度为symbolSize * 2
    //symbolRotate : null,   // 图形旋转控制
    large: false,        // 大规模散点图
    largeThreshold: 2000,   // 大规模阀值，large为true且数据量>largeThreshold才启用大规模模式
    itemStyle: {
        normal: {
            // color: 各异,
            label: {
                show: false
                // position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为
                //           'inside'|'left'|'right'|'top'|'bottom'
                // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
            }
        },
        emphasis: {
            // color: '各异'
            label: {
                show: false
                // position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为
                //           'inside'|'left'|'right'|'top'|'bottom'
                // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
            }
        }
    }
},
 
// 雷达图默认参数
radar : {
    itemStyle: {
        normal: {
            // color: 各异,
            label: {
                show: false
            },
            lineStyle: {
                width: 2,
                type: 'solid'
            }
        },
        emphasis: {
            // color: 各异,
            label: {
                show: false
            }
        }
    },
    //symbol: null,          // 拐点图形类型
    symbolSize: 2          // 可计算特性参数，空数据拖拽提示图形大小
    //symbolRotate : null,    // 图形旋转控制
},
 
// 饼图默认参数
pie: {
    center : ['50%', '50%'],          // 默认全局居中
    radius : [0, '75%'],
    clockWise : false,             // 默认逆时针
    startAngle: 90,
    minAngle: 0,                 // 最小角度改为0
    selectedOffset: 10,         // 选中是扇区偏移量
    itemStyle: {
        normal: {
            // color: 各异,
            borderColor: '#fff',
            borderWidth: 1,
            label: {
                show: true,
                position: 'outer'
                // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
            },
            labelLine: {
                show: true,
                length: 20,
                lineStyle: {
                    // color: 各异,
                    width: 1,
                    type: 'solid'
                }
            }
        },
        emphasis: {
            // color: 各异,
            borderColor: 'rgba(0,0,0,0)',
            borderWidth: 1,
            label: {
                show: false
                // position: 'outer'
                // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
            },
            labelLine: {
                show: false,
                length: 20,
                lineStyle: {
                    // color: 各异,
                    width: 1,
                    type: 'solid'
                }
            }
        }
    }
},
 
map: {
    mapType: 'china',   // 各省的mapType暂时都用中文
    mapLocation: {
        x : 'center',
        y : 'center'
        // width    // 自适应
        // height   // 自适应
    },
    showLegendSymbol : true,       // 显示图例颜色标识（系列标识的小圆点），存在legend时生效
    itemStyle: {
        normal: {
            // color: 各异,
            borderColor: '#fff',
            borderWidth: 1,
            areaStyle: {
                color: '#ccc'   //rgba(135,206,250,0.8)
            },
            label: {
                show: false,
                textStyle: {
                    color: 'rgba(139,69,19,1)'
                }
            }
        },
        emphasis: {                // 也是选中样式
            // color: 各异,
            borderColor: 'rgba(0,0,0,0)',
            borderWidth: 1,
            areaStyle: {
                color: 'rgba(255,215,0,0.8)'
            },
            label: {
                show: false,
                textStyle: {
                    color: 'rgba(139,69,19,1)'
                }
            }
        }
    }
},
 
force : {
    // 数据map到圆的半径的最小值和最大值
    minRadius : 10,
    maxRadius : 20,
    density : 1.0,
    attractiveness : 1.0,
    // 初始化的随机大小位置
    initSize : 300,
    // 向心力因子，越大向心力越大
    centripetal : 1,
    // 冷却因子
    coolDown : 0.99,
    // 分类里如果有样式会覆盖节点默认样式
    itemStyle: {
        normal: {
            // color: 各异,
            label: {
                show: false
                // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
            },
            nodeStyle : {
                brushType : 'both',
                color : '#f08c2e',
                strokeColor : '#5182ab'
            },
            linkStyle : {
                strokeColor : '#5182ab'
            }
        },
        emphasis: {
            // color: 各异,
            label: {
                show: false
                // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
            },
            nodeStyle : {},
            linkStyle : {}
        }
    }
},
 
chord : {
    radius : ['65%', '75%'],
    center : ['50%', '50%'],
    padding : 2,
    sort : 'none',   // can be 'none', 'ascending', 'descending'
    sortSub : 'none', // can be 'none', 'ascending', 'descending'
    startAngle : 90,
    clockWise : false,
    showScale : false,
    showScaleText : false,
    itemStyle : {
        normal : {
            label : {
                show : true
                // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
            },
            lineStyle : {
                width : 0,
                color : '#000'
            },
            chordStyle : {
                lineStyle : {
                    width : 1,
                    color : '#666'
                }
            }
        },
        emphasis : {
            lineStyle : {
                width : 0,
                color : '#000'
            },
            chordStyle : {
                lineStyle : {
                    width : 2,
                    color : '#333'
                }
            }
        }
    }
},
 
island: {
    r: 15,
    calculateStep: 0.1  // 滚轮可计算步长 0.1 = 10%
},
 
markPoint : {
    symbol: 'pin',         // 标注类型
    symbolSize: 10,            // 标注大小，半宽（半径）参数，当图形为方向或菱形则总宽度为symbolSize * 2
    //symbolRotate : null, // 标注旋转控制
    itemStyle: {
        normal: {
            // color: 各异，
            // borderColor: 各异,     // 标注边线颜色，优先于color
            borderWidth: 2,         // 标注边线线宽，单位px，默认为1
            label: {
                show: true,
                position: 'inside'    // 可选为'left'|'right'|'top'|'bottom'
                // textStyle: null    // 默认使用全局文本样式，详见TEXTSTYLE
            }
        },
        emphasis: {
            // color: 各异
            label: {
                show: true
                // position: 'inside'    // 'left'|'right'|'top'|'bottom'
                // textStyle: null     // 默认使用全局文本样式，详见TEXTSTYLE
            }
        }
    }
},
 
markLine : {
    // 标线起始和结束的symbol介绍类型，如果都一样，可以直接传string
    symbol: ['circle', 'arrow'], 
    // 标线起始和结束的symbol大小，半宽（半径）参数，当图形为方向或菱形则总宽度为symbolSize * 2
    symbolSize: [2, 4],
    // 标线起始和结束的symbol旋转控制
    //symbolRotate : null,
    itemStyle: {
        normal: {
            // color: 各异,           // 标线主色，线色，symbol主色
            // borderColor: 随color,       // 标线symbol边框颜色，优先于color
            borderWidth: 2,          // 标线symbol边框线宽，单位px，默认为2
            label: {
                show: false,
                // 可选为 'start'|'end'|'left'|'right'|'top'|'bottom'
                position: 'inside', 
                textStyle: {         // 默认使用全局文本样式，详见TEXTSTYLE
                    color: '#333'
                }
            },
            lineStyle: {
                // color: 随borderColor,    // 主色，线色，优先级高于borderColor和color
                // width: 随borderWidth,    // 优先于borderWidth
                type: 'solid',
                shadowColor : 'rgba(0,0,0,0)', //默认透明
                shadowBlur: 5,
                shadowOffsetX: 3,
                shadowOffsetY: 3
            }
        },
        emphasis: {
            // color: 各异
            label: {
                show: false
                // position: 'inside'   // 'left'|'right'|'top'|'bottom'
                // textStyle: null    // 默认使用全局文本样式，详见TEXTSTYLE
            },
            lineStyle : {}
        }
    }
},
 
textStyle: {
    decoration: 'none',
    fontFamily: 'Arial, Verdana, sans-serif',
    fontFamily2: '微软雅黑',    // IE8- 字体模糊并且不支持不同字体混排，额外指定一份
    fontSize: 12,
    fontStyle: 'normal',
    fontWeight: 'normal'
},
 
// 默认标志图形类型列表
symbolList : [
  'circle', 'rectangle', 'triangle', 'diamond',
  'emptyCircle', 'emptyRectangle', 'emptyTriangle', 'emptyDiamond'
],
loadingText : 'Loading...',
// 可计算特性配置，孤岛，提示颜色
calculable: false,                       // 默认关闭可计算特性
calculableColor: 'rgba(255,165,0,0.6)',       // 拖拽提示边框颜色
calculableHolderColor: '#ccc',               // 可计算占位提示颜色
nameConnector: ' & ',
valueConnector: ' : ',
animation: true,
animationThreshold: 2500,           // 动画元素阀值，产生的图形原素超过2500不出动画
addDataAnimation: true,         // 动态数据接口是否开启动画效果
animationDuration: 2000,
animationEasing: 'ExponentialOut'             //BounceOut

2.vue+echarts

2.0 步骤

1.构建函数：vue组件中，js函数要放到methods里，因此构建echarts的代码要放到methods里
2.定义显示数据：定义好echarts表示的数据
3.获取显示位置：获取echarts图的位置
4.设置echarts图属性：在刚刚获取的位置设置echarts图
//5.运行函数显示echarts图

2.1vue+echarts做中国地图

2.1.1 参考

echarts绘画：https://blog.csdn.net/u010520912/article/details/77980114
echarts绘画:https://www.cnblogs.com/yuwenjing0727/p/9565949.html
vue+echarts:https://www.cnblogs.com/ldlx-mars/p/9242250.html

2.1.2 代码+效果（记得给div设置高度，要不然无法显示）

<template>
	<div id="chinaMap"></div>
</template>

<script>
	import echarts from "echarts"
	import '../../../../node_modules/echarts/map/js/china.js'

	export default {
		name: "epidemicMap",
		methods: {
			randomData: function () {
				return Math.round(Math.random() * 600);
			},
			drawmap: function () {
				var mydata = [
					{name: '北京', value: this.randomData()}, {name: '天津', value: this.randomData()},
					{name: '上海', value: this.randomData()}, {name: '重庆', value: this.randomData()},
					{name: '河北', value: this.randomData()}, {name: '河南', value: this.randomData()},
					{name: '云南', value: this.randomData()}, {name: '辽宁', value: this.randomData()},
					{name: '黑龙江', value: this.randomData()}, {name: '湖南', value: this.randomData()},
					{name: '安徽', value: this.randomData()}, {name: '山东', value: this.randomData()},
					{name: '新疆', value: this.randomData()}, {name: '江苏', value: this.randomData()},
					{name: '浙江', value: this.randomData()}, {name: '江西', value: this.randomData()},
					{name: '湖北', value: this.randomData()}, {name: '广西', value: this.randomData()},
					{name: '甘肃', value: this.randomData()}, {name: '山西', value: this.randomData()},
					{name: '内蒙古', value: this.randomData()}, {name: '陕西', value: this.randomData()},
					{name: '吉林', value: this.randomData()}, {name: '福建', value: this.randomData()},
					{name: '贵州', value: this.randomData()}, {name: '广东', value: this.randomData()},
					{name: '青海', value: this.randomData()}, {name: '西藏', value: this.randomData()},
					{name: '四川', value: this.randomData()}, {name: '宁夏', value: this.randomData()},
					{name: '海南', value: this.randomData()}, {name: '台湾', value: this.randomData()},
					{name: '香港', value: this.randomData()}, {name: '澳门', value: this.randomData()}
				];
				var option = {
					backgroundColor: '#F4F7FA',
					title: {
						text: '目前确诊人数',
						subtext: '',
						x: 'center'
					},
					tooltip: {
						trigger: 'item'
					},

					//左侧小导航图标
					visualMap: {
						show: true,
						x: 'left',
						y: 'center',
						splitList: [
							{start: 500, end: 600}, {start: 300, end: 500},
							{start: 100, end: 300}, {start: 50, end: 100},
							{start: 10, end: 50}, {start: 0, end: 10},
						],
						color: ['#660033', '#CC0066', '#FF6633', '#FF9797', '#e6ac53', '#FFE4C4']
					},

					//配置属性
					series: [{
						name: '数据',
						type: 'map',
						mapType: 'china',
						roam: false,  //鼠标滑动缩放
						label: {
							normal: {
								show: true  //省份名称
							},
							emphasis: {
								show: false
							}
						},
						data: mydata  //数据
					}]
				};
				var chart = echarts.init(document.getElementById('chinaMap'));
				chart.setOption(option);
			},
		},
		mounted: function () {
			this.drawmap();
		},
	};

</script>

<style scoped>
	#chinaMap {
		width: 100%;
		height: 1000px;
	}
</style>

2.2 使用echarts中的树突官方实例

2.2.1 实例

2.2.2 代码（记得给div设置高度，要不然无法显示）

<template>
	<div id="blogtree"></div>
</template>

<script>
	import echarts from "echarts"
	export default {
		name: "blogTree",
		methods: {
			//1.构建函数：vue组件中，js函数要放到methods里，因此构建echarts的代码要放到methods里
			drawTree: function () {
				//2.定义显示数据：定义好echarts表示的数据
				var data = {
					"name": "flare",
					"children": [
						{
							"name": "data",
							"children": [
								{
									"name": "converters",
									"children": [
										{"name": "date:20200413", "value": 721},
										{"name": "http://www.baidu.com", "value": 781}
									]
								},
								{
									"name": "DataUtil",
									"value": 3322
								}
							]
						},
						{
							"name": "display",
							"children": [
								{"name": "DirtySprite", "value": 8833},
								{"name": "LineSprite", "value": 1732},
								{"name": "RectSprite", "value": 3623}
							]
						},
						{
							"name": "flex",
							"children": [
								{"name": "FlareVis", "value": 4116}
							]
						},
						{
							"name": "query",
							"children": [
								{"name": "AggregateExpression", "value": 1616},
								{"name": "And", "value": 1027},
								{"name": "Arithmetic", "value": 3891},
								{"name": "Average", "value": 891},
								{"name": "BinaryExpression", "value": 2893},
								{"name": "Comparison", "value": 5103},
								{"name": "CompositeExpression", "value": 3677},
								{"name": "Count", "value": 781},
								{"name": "DateUtil", "value": 4141},
								{"name": "Distinct", "value": 933},
								{"name": "Expression", "value": 5130},
								{"name": "ExpressionIterator", "value": 3617},
								{"name": "Fn", "value": 3240},
								{"name": "If", "value": 2732},
								{"name": "IsA", "value": 2039},
								{"name": "Literal", "value": 1214},
								{"name": "Match", "value": 3748},
								{"name": "Maximum", "value": 843},
								{
									"name": "methods",
									"children": [
										{"name": "add", "value": 593},
										{"name": "and", "value": 330},
										{"name": "average", "value": 287},
										{"name": "count", "value": 277},
										{"name": "distinct", "value": 292},
										{"name": "div", "value": 595},
										{"name": "eq", "value": 594},
										{"name": "fn", "value": 460},
										{"name": "gt", "value": 603},
										{"name": "gte", "value": 625},
										{"name": "iff", "value": 748},
										{"name": "isa", "value": 461},
										{"name": "lt", "value": 597},
										{"name": "lte", "value": 619},
										{"name": "max", "value": 283},
										{"name": "min", "value": 283},
										{"name": "mod", "value": 591},
										{"name": "mul", "value": 603},
										{"name": "neq", "value": 599},
										{"name": "not", "value": 386},
										{"name": "or", "value": 323},
										{"name": "orderby", "value": 307},
										{"name": "range", "value": 772},
										{"name": "select", "value": 296},
										{"name": "stddev", "value": 363},
										{"name": "sub", "value": 600},
										{"name": "sum", "value": 280},
										{"name": "update", "value": 307},
										{"name": "variance", "value": 335},
										{"name": "where", "value": 299},
										{"name": "xor", "value": 354},
										{"name": "_", "value": 264}
									]
								},
								{"name": "Minimum", "value": 843},
								{"name": "Not", "value": 1554},
								{"name": "Or", "value": 970},
								{"name": "Query", "value": 13896},
								{"name": "Range", "value": 1594},
								{"name": "StringUtil", "value": 4130},
								{"name": "Sum", "value": 791},
								{"name": "Variable", "value": 1124},
								{"name": "Variance", "value": 1876},
								{"name": "Xor", "value": 1101}
							]
						},
						{
							"name": "scale",
							"children": [
								{"name": "IScaleMap", "value": 2105},
								{"name": "LinearScale", "value": 1316},
								{"name": "LogScale", "value": 3151},
								{"name": "OrdinalScale", "value": 3770},
								{"name": "QuantileScale", "value": 2435},
								{"name": "QuantitativeScale", "value": 4839},
								{"name": "RootScale", "value": 1756},
								{"name": "Scale", "value": 4268},
								{"name": "ScaleType", "value": 1821},
								{"name": "TimeScale", "value": 5833}
							]
						}
					]
				};
				//3.获取显示位置：获取echarts图的位置
				var myChart = echarts.init(document.getElementById('blogtree'));
				// echarts.util.each(data.children, function (datum, index) {
				// 	index % 2 === 0 && (datum.collapsed = true);
				// });
				//4.设置echarts图属性：在刚刚获取的位置设置echarts图
				myChart.setOption({
					tooltip: {
						trigger: 'item',
						triggerOn: 'mousemove'
					},
					//legend和matplotlib里的一个意思,注意这里的name要和series里的name对应
					legend: {
						top: '2%',
						left: '3%',
						orient: 'vertical',
						data: [{
							name: 'blogTree',
							icon: 'rectangle'
						},
							{
								name: 'tree2',
								icon: 'rectangle'
							}],
						borderColor: '#c23531'
					},
					series: [
						{
							type: 'tree',

							name: 'blogTree',

							data: [data],

							top: '1%',
							left: '7%',
							bottom: '1%',
							right: '20%',

							symbolSize: 7,

							label: {
								position: 'left',
								verticalAlign: 'middle',
								align: 'right',
								fontSize:18
							},

							leaves: {
								label: {
									position: 'right',
									verticalAlign: 'middle',
									align: 'left'
								}
							},

							expandAndCollapse: true,

							animationDuration: 550,
							animationDurationUpdate: 750

						},
					]
				});
			}
		},
		mounted: function () {
			//5.运行函数显示echarts图
			this.drawTree();
		},
	}
</script>

<style scoped>
#blogtree {
	width: 100%;
	height: 1000px;
	overflow: auto;
}
</style>

2.3 echarts的提示框分别显示多个值（以中国地图为例）

2.3.1 法一：直接在数据中用
拼接，简单，但用不了视觉映射

2.3.1.1 代码

下面的代码中在“黑龙江”就用了此种方法：

<template>
	<div id="chinaMap"></div>
</template>

<script>
	import echarts from "echarts"
	import '../../../../node_modules/echarts/map/js/china.js'
	import '../../../../node_modules/echarts/lib/component/visualMap.js'

	export default {
		name: "epidemicMap",
		methods: {
			randomData: function () {
				return Math.round(Math.random() * 600);
			},
			drawmap: function () {
				var mydata = [
					{name: '北京', value: this.randomData()}, {name: '天津', value: this.randomData()},
					{name: '上海', value: this.randomData()}, {name: '重庆', value: this.randomData()},
					{name: '河北', value: this.randomData()}, {name: '河南', value: this.randomData()},
					{name: '云南', value: this.randomData()}, {name: '辽宁', value: this.randomData()},
					{name: '黑龙江', value: "<br/>数据1:1<br/>数据2:2"}, {name: '湖南', value: this.randomData()},
					{name: '安徽', value: this.randomData()}, {name: '山东', value: this.randomData()},
					{name: '新疆', value: this.randomData()}, {name: '江苏', value: this.randomData()},
					{name: '浙江', value: this.randomData()}, {name: '江西', value: this.randomData()},
					{name: '湖北', value: this.randomData()}, {name: '广西', value: this.randomData()},
					{name: '甘肃', value: this.randomData()}, {name: '山西', value: this.randomData()},
					{name: '内蒙古', value: this.randomData()}, {name: '陕西', value: this.randomData()},
					{name: '吉林', value: this.randomData()}, {name: '福建', value: this.randomData()},
					{name: '贵州', value: this.randomData()}, {name: '广东', value: this.randomData()},
					{name: '青海', value: this.randomData()}, {name: '西藏', value: this.randomData()},
					{name: '四川', value: this.randomData()}, {name: '宁夏', value: this.randomData()},
					{name: '海南', value: this.randomData()}, {name: '台湾', value: this.randomData()},
					{name: '香港', value: this.randomData()}, {name: '澳门', value: this.randomData()}
				];
				
				var option = {
					backgroundColor: '#F4F7FA',
					title: {
						text: '目前确诊人数',
						subtext: '',
						x: 'center'
					},
					tooltip: {
						trigger: 'item',
						//formatter是回调函数，会自动调用
						formatter: function(params) {
							var res = params.name+'<br/>';
							var myseries = option.series;
							for (var i = 0; i < myseries.length; i++) {
								for(var j=0;j<myseries[i].data.length;j++){
									if(myseries[i].data[j].name==params.name){
										res+=myseries[i].name +' : '+myseries[i].data[j].value+'</br>';
									}
								}
							}
							return res;
						},
					},

					//左侧小导航图标
					visualMap: {
						show: true,
						x: 'left',
						y: 'center',
						splitList: [
							{start: 500, end: 600}, {start: 300, end: 500},
							{start: 100, end: 300}, {start: 50, end: 100},
							{start: 10, end: 50}, {start: 0, end: 10},
						],
						color: ['#660033', '#CC0066', '#FF6633', '#FF9797', '#e6ac53', '#FFE4C4']
					},

					//配置属性
					series: [{
						name: '数据',
						type: 'map',
						mapType: 'china',
						roam: false,  //鼠标滑动缩放
						label: {
							normal: {
								show: true  //省份名称
							},
							emphasis: {
								show: false
							}
						},
						data: mydata  //数据
					}]
				};
				var chart = echarts.init(document.getElementById('chinaMap'));
				chart.setOption(option);
			},
		},
		mounted: function () {
			this.drawmap();
		},
	};

</script>

<style scoped>
	#chinaMap {
		width: 100%;
		height: 1000px;
	}
</style>

2.3.1.2 效果，提示框有点丑

鼠标移到黑龙江会发现显示了数据1和数据2：

2.3.1.3 bug：无法视觉映射

但是鼠标移走会发现，黑龙江这个板块无法使用视觉映射：

2.3.2 法二： 更改tooltip：多个series图表的tooltip自定义

2.3.2.1 代码

参考1
参考2
参考3
具体做法：tooltip.formatter 可以做到分别显示多个值 （提示框浮层内容格式器，支持字符串模板和回调函数两种形式）
官方连接：https://www.echartsjs.com/zh/option.html#tooltip
实现：
tooltip中加上以下formatter代码

tooltip: {
	trigger: 'item',
	//formatter是回调函数，会自动调用
	formatter: function(params) {
		var res = params.name+'<br/>';
		var myseries = option.series;
		for (var i = 0; i < myseries.length; i++) {
			for(var j=0;j<myseries[i].data.length;j++){
				if(myseries[i].data[j].name==params.name){
					res+=myseries[i].name +' : '+myseries[i].data[j].value+'</br>';
				}
			}
		}
		return res;
	},
},

除了tooltip有变动外，还要改动series以及加一组新的数据mydata2，因此全部代码如下：

<template>
	<div id="chinaMap"></div>
</template>

<script>
	import echarts from "echarts"
	import '../../../../node_modules/echarts/map/js/china.js'
	//import '../../../../node_modules/echarts/lib/component/visualMap.js'

	export default {
		name: "epidemicMap",
		methods: {
			randomData: function () {
				return Math.round(Math.random() * 600);
			},
			drawmap: function () {
				var mydata = [
					{name: '北京', value: this.randomData()}, {name: '天津', value: this.randomData()},
					{name: '上海', value: this.randomData()}, {name: '重庆', value: this.randomData()},
					{name: '河北', value: this.randomData()}, {name: '河南', value: this.randomData()},
					{name: '云南', value: this.randomData()}, {name: '辽宁', value: this.randomData()},
					{name: '黑龙江', value: this.randomData()}, {name: '湖南', value: this.randomData()},
					{name: '安徽', value: this.randomData()}, {name: '山东', value: this.randomData()},
					{name: '新疆', value: this.randomData()}, {name: '江苏', value: this.randomData()},
					{name: '浙江', value: this.randomData()}, {name: '江西', value: this.randomData()},
					{name: '湖北', value: this.randomData()}, {name: '广西', value: this.randomData()},
					{name: '甘肃', value: this.randomData()}, {name: '山西', value: this.randomData()},
					{name: '内蒙古', value: this.randomData()}, {name: '陕西', value: this.randomData()},
					{name: '吉林', value: this.randomData()}, {name: '福建', value: this.randomData()},
					{name: '贵州', value: this.randomData()}, {name: '广东', value: this.randomData()},
					{name: '青海', value: this.randomData()}, {name: '西藏', value: this.randomData()},
					{name: '四川', value: this.randomData()}, {name: '宁夏', value: this.randomData()},
					{name: '海南', value: this.randomData()}, {name: '台湾', value: this.randomData()},
					{name: '香港', value: this.randomData()}, {name: '澳门', value: this.randomData()}
				];
				var mydata2 = [
					{name: '北京', value: this.randomData(),visualMap:false}, {name: '天津', value: this.randomData(),visualMap:false},
					{name: '上海', value: this.randomData(),visualMap:false}, {name: '重庆', value: this.randomData(),visualMap:false},
					{name: '河北', value: this.randomData(),visualMap:false}, {name: '河南', value: this.randomData(),visualMap:false},
					{name: '云南', value: this.randomData(),visualMap:false}, {name: '辽宁', value: this.randomData(),visualMap:false},
					{name: '黑龙江', value: this.randomData(),visualMap:false}, {name: '湖南', value: this.randomData(),visualMap:false},
					{name: '安徽', value: this.randomData(),visualMap:false}, {name: '山东', value: this.randomData(),visualMap:false},
					{name: '新疆', value: this.randomData(),visualMap:false}, {name: '江苏', value: this.randomData(),visualMap:false},
					{name: '浙江', value: this.randomData(),visualMap:false}, {name: '江西', value: this.randomData(),visualMap:false},
					{name: '湖北', value: this.randomData(),visualMap:false}, {name: '广西', value: this.randomData(),visualMap:false},
					{name: '甘肃', value: this.randomData(),visualMap:false}, {name: '山西', value: this.randomData(),visualMap:false},
					{name: '内蒙古', value: this.randomData(),visualMap:false}, {name: '陕西', value: this.randomData(),visualMap:false},
					{name: '吉林', value: this.randomData(),visualMap:false}, {name: '福建', value: this.randomData(),visualMap:false},
					{name: '贵州', value: this.randomData(),visualMap:false}, {name: '广东', value: this.randomData(),visualMap:false},
					{name: '青海', value: this.randomData(),visualMap:false}, {name: '西藏', value: this.randomData(),visualMap:false},
					{name: '四川', value: this.randomData(),visualMap:false}, {name: '宁夏', value: this.randomData(),visualMap:false},
					{name: '海南', value: this.randomData(),visualMap:false}, {name: '台湾', value: this.randomData(),visualMap:false},
					{name: '香港', value: this.randomData(),visualMap:false}, {name: '澳门', value: this.randomData(),visualMap:false}
				];
				var option = {
					backgroundColor: '#F4F7FA',
					title: {
						text: '目前确诊人数',
						subtext: '',
						x: 'center'
					},
					tooltip: {
						trigger: 'item',
						//formatter是回调函数，会自动调用
						formatter: function(params) {
							var res = params.name+'<br/>';
							var myseries = option.series;
							for (var i = 0; i < myseries.length; i++) {
								for(var j=0;j<myseries[i].data.length;j++){
									if(myseries[i].data[j].name==params.name){
										res+=myseries[i].name +' : '+myseries[i].data[j].value+'</br>';
									}
								}
							}
							return res;
						},
					},

					//左侧小导航图标
					visualMap: {
						show: true,
						x: 'left',
						y: 'center',
						splitList: [
							{start: 500, end: 600}, {start: 300, end: 500},
							{start: 100, end: 300}, {start: 50, end: 100},
							{start: 10, end: 50}, {start: 0, end: 10},
						],
						color: ['#660033', '#CC0066', '#FF6633', '#FF9797', '#e6ac53', '#FFE4C4']
					},

					//配置属性
					series: [{
						name: '数据',
						type: 'map',
						mapType: 'china',
						roam: false,  //鼠标滑动缩放
						label: {
							normal: {
								show: true  //省份名称
							},
							emphasis: {
								show: false
							}
						},
						data: mydata  //数据
					},
					{
						name: '数据2',
						type: 'map',
						// mapType: 'china',
						// roam: false,  //鼠标滑动缩放
						// label: {
						// 	normal: {
						// 		show: true  //省份名称
						// 	},
						// 	emphasis: {
						// 		show: false
						// 	}
						// },
						data: mydata2  //数据
					}]
				};
				var chart = echarts.init(document.getElementById('chinaMap'));
				chart.setOption(option);
			},
		},
		mounted: function () {
			this.drawmap();
		},
	};

</script>

<style scoped>
	#chinaMap {
		width: 100%;
		height: 1000px;
	}
</style>

2.3.2.2 效果

2.3.2.3 bug：视觉映射是数据1和数据2之和（已解决）

通过上图可以看出有些板块没有颜色，是因为视觉映射的范围是数据1和数据2之和，因此想了一些办法进行解决。
尝试一：通过官方文档可知：在数据中添加visualMap:false，则可在视觉映射是不包括此数据。
官方文档链接：https://www.echartsjs.com/zh/option.html#visualMap

var mydata2 = [
					{name: '北京', value: this.randomData(),visualMap:false}, {name: '天津', value: this.randomData(),visualMap:false},
					{name: '上海', value: this.randomData(),visualMap:false}, {name: '重庆', value: this.randomData(),visualMap:false},
					{name: '河北', value: this.randomData(),visualMap:false}, {name: '河南', value: this.randomData(),visualMap:false},
					{name: '云南', value: this.randomData(),visualMap:false}, {name: '辽宁', value: this.randomData(),visualMap:false},
					{name: '黑龙江', value: this.randomData(),visualMap:false}, {name: '湖南', value: this.randomData(),visualMap:false},
					{name: '安徽', value: this.randomData(),visualMap:false}, {name: '山东', value: this.randomData(),visualMap:false},
					{name: '新疆', value: this.randomData(),visualMap:false}, {name: '江苏', value: this.randomData(),visualMap:false},
					{name: '浙江', value: this.randomData(),visualMap:false}, {name: '江西', value: this.randomData(),visualMap:false},
					{name: '湖北', value: this.randomData(),visualMap:false}, {name: '广西', value: this.randomData(),visualMap:false},
					{name: '甘肃', value: this.randomData(),visualMap:false}, {name: '山西', value: this.randomData(),visualMap:false},
					{name: '内蒙古', value: this.randomData(),visualMap:false}, {name: '陕西', value: this.randomData(),visualMap:false},
					{name: '吉林', value: this.randomData(),visualMap:false}, {name: '福建', value: this.randomData(),visualMap:false},
					{name: '贵州', value: this.randomData(),visualMap:false}, {name: '广东', value: this.randomData(),visualMap:false},
					{name: '青海', value: this.randomData(),visualMap:false}, {name: '西藏', value: this.randomData(),visualMap:false},
					{name: '四川', value: this.randomData(),visualMap:false}, {name: '宁夏', value: this.randomData(),visualMap:false},
					{name: '海南', value: this.randomData(),visualMap:false}, {name: '台湾', value: this.randomData(),visualMap:false},
					{name: '香港', value: this.randomData(),visualMap:false}, {name: '澳门', value: this.randomData(),visualMap:false}
				];

但是发现没有作用，因此有了尝试二
尝试二：上述使用了visualMap:false不起作用，上网查得一篇文章：https://segmentfault.com/a/1190000019977804

因此我在代码中添加了：

还是不起作用！
后来经过调试发现series里的mapType:‘china’这行代码的原因，一个series里只需要一个，这样的话visualMap:false就起作用了，而且此时不需要引入visualMap.js，因为import echarts from "echarts"会全部引入。

2.4 echarts的图添加事件(以下代码在2.2基础上添加)

2.4.0 参考

https://blog.csdn.net/rain_web/article/details/80386247

2.4.1 树图结点添加点击事件

1.method里添加点击事件clickFun

2.调用

2.5 vue+echarts获取json数据显示

2.5.1 注意

获取数据时采用的是ajax方法，因为ajax默认是异步的，且代码执行顺序如下：

此时如果不加限制、默认是异步方式，那么就会发送请求后直接执行画图函数，此时还没有取到数据，因此需要不使用异步方式，代码如下：

async解释：