ECharts学习笔记

ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。 有了echarts 再设置option变量
0、JSP引入echarts：
1、准备具备宽高的DOM容器放图表 设置好id或class以便获取
2、获得var myChart：使用echarts对象方法init返回一个echarts对象(var myChart=echarts.init(document.getElementById(""))😉
3、获得var option：参数设置使用JSON格式(配置语法：https://www.runoob.com/echarts/echarts-setup.html)
4、使用设置好的对象与参数显示图表myChart.setOption(option)
难点在于不同需求下的不同类型图表设计、JSON参数设置与数据获取 不同类型图表间参数要求、设计方法都不同

题外话：发现自己一个弱点 面对技术喜欢总结而不是上手实操，导致上手能力弱，且总结的东西只是存在哪里并不能真的记住，而是很容易就忘记了。目前总结的意义还是再需要时可以快速查询出当时的笔记吧。
总结对知识梳理记忆还是有帮助的，但之后也要精简这部分，多上手做案例实践。

各个配置项简单总结：
series : [ 设置数据项 折线图设置有几条线 柱形图设置有几个柱子
name显示名称、 type显示类型line/bar… 、data展示的数据、
markPoint最大最小值/markLine平均线 { data: [{type: ‘average/max/min’, name: ‘平均值’(或设置xy轴坐标及值)}] }
]
title: {text: ‘未来一周气温变化’, subtext: ‘纯属虚构’}, 图表标题
tooltip: { trigger: ‘axis’}, 图表提示信息 可以为空
xAxis: {name: ,type: ‘category’,data: [‘周一’, ‘周二’]}, 设置x、y轴轴线信息
yAxis: {name: ,type: ‘value’, axisLabel: {formatter: ‘{value} °C’}},
legend: { data:[‘销量’]icon: ‘circle’,textStyle: {color: ‘red’ }}, data与series项对应 对其进行具体设置 可省略
title: {text: ‘未来一周气温变化’, subtext: ‘纯属虚构’}, 图表标题
tooltip: { trigger: ‘axis’}, 图表提示信息 可以为空
xAxis: {name: ,type: ‘category’,data: [‘周一’, ‘周二’]}, 设置x、y轴轴线信息
yAxis: {name: ,type: ‘value’, axisLabel: {formatter: ‘{value} °C’}},
legend: { data:[‘销量’]icon: ‘circle’,textStyle: {color: ‘red’ }}, data与series项对应 对其进行具体设置 可省略
toolbox:{ show: true, 工具栏设置
feature: { saveAsImage: {}， 保存为图片按钮
restore: {}， 还原按钮
magicType: {type: [‘line’, ‘bar’]}， 转换为其他类型图表按钮
dataZoom: {yAxisIndex: ‘none’}, 区域缩放按钮
dataView: {readOnly: false} 转为纯数据视图按钮
}},

各个配置项详细说明总结
theme = {
// 全图默认背景
// 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