ECharts

本文件已定稿，最后修改时间 20240809 00:10

一、ECharts的介绍

ECharts是一个使用JavaScript实现的开源可视化库，兼容性强，底层依赖矢量图形库ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

https://echarts.apache.org/zh/option.html#title

二、ECharts的基本使用

ECharts快速上手

引入echarts.js文件
<script src="echarts.js"></script>

准备一个呈现图表的盒子

<div style='width: 600px; height: 400px'></div>

初始化echarts实例对象

<script>
    // 参数，dom元素，决定图表最终呈现的位置
	const myCharts = echarts.init(document.querySelector('div'))
</script>

准备配置项

<script>
    // 参数，dom元素，决定图表最终呈现的位置
	const myCharts = echarts.init(document.querySelector('div'));
    const option = {
        xAxis: {
            type: 'category',
            data: ['张三','李四','王五']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '语文',
                type: 'bar',
                data: [70, 92, 87]
            }
        ]
    }
</script>

将配置项设置给echarts实例对象

<script>
    // 参数，dom元素，决定图表最终呈现的位置
	const myCharts = echarts.init(document.querySelector('div'));
    const option = {
        xAxis: {
            type: 'category',
            data: ['张三','李四','王五']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '语文',
                type: 'bar',
                data: [70, 92, 87]
            }
        ]
    }
    myCharts.setOption(option)
</script>

相关配置项
- xAxis：直角坐标系中的 x 轴
  - type:'category'：类目轴
- yAxis：直角坐标系中的 y 轴
  - type:'value'：数值轴
- series：系列列表，每个系列通过 type 决定自己的图标类型
  - type:'pic'：图标类型
  其他见官方文档

三、EChasrts常见图表

7大图表：柱状图、折线图、散点图、饼图、地图、雷达图、仪表盘图

柱状图

常见效果

标记：最大值、最小值、平均值

markPoint

markLine

series: [
    {
        name: '语文',
        type: 'bar',
        markPoint: {
            data: [
                {
                    type: 'max', name: '最大值'
                },
                {
                    type: 'min', name: '最小值'
                }
            ]
        },
        markLine: {
        	data: [
        		type: 'average', name: '平均值'
        	]
    	},
        data: [70, 92, 87]
    }
]

显示：数值显示，柱宽度，横向柱状图

label

barWidth

xAxis 和 yAxis 交换

series: [
    {
        name: '语文',
        type: 'bar',
        markPoint: {
            data: [
                {
                    type: 'max', name: '最大值'
                },
                {
                    type: 'min', name: '最小值'
                }
            ]
        },
        markLine: {
        	data: [
        		type: 'average', name: '平均值'
        	]
    	},
        label: {
            show: true,
            position: 'top'
        },
        barWidth: '30%'
        data: [70, 92, 87]
    }
]

通用配置

任何图表都能使用的配置

标题：title
- 文字样式：textStyle
- 标题边框：borderWidth、borderColor、borderRadius
- 标题位置：left、top、right、bottom
提示：tooltip
- 触发类型：trigger
  
  item、axis
- 触发时机：triggerOn
  
  mouseover、click
- 格式化：formatter

工具按钮：toolbox

toolbox: {
    feaature: {
        saveAsImage: {},  // 导出图片
        dataView: {},     // 数据视图
        restore: {},      // 重置
        dataZoom: {},     // 区域缩放
        magicType: {
            type: ['bar', 'line']
        }                 // 动态图标类型切换
    }
}

图例：legend

需要和 series 配合使用

legend 中的data是一个数组

legend 中的data的值需要和series数组中某组数据的name值一致

series: [
    {
        name: '语文',
        type: 'bar',
        data: [70, 92, 87]
    },
    {
        name: '数学',
        type: 'bar',
        data: [70, 92, 87]
    }
],
legend: {
    data: ['语文', '数学']
}

折线图

常见效果

标记：最大值、最小值、平均值、标注区间

前三个和柱状图一样

标注区间：markArea

markArea: {
    data: [
        [   // 第一个区间
            {
                xAxis: '1月'    // 开始
            },
            {
                xAxis: '2月'    // 结束
            }
        ],
        [   // 第二个区间
            {
                xAxis: '7月'    // 开始
            },
            {
                xAxis: '8月'    // 结束
            }
        ]
    ]
}

线条控制：平滑，风格

smooth: true,
lineStyle: {
    color: 'green'，
    type: 'dashed'  // 虚线 dotted:点状线、solid:实线
}

填充风格
areaStyle: {
color: 'pink'
}

紧挨边缘

boundaryGap:false

xAxis: {
    type: 'category',
    data: [],
    boundaryGap: false
}

缩放：脱离0值比例

scale:true

yAxis: {
    type: 'value',
    scale: true
}

堆叠图

series: [
	{
        type: 'line',
        data: [],
        stack: 'all',
        areaStyle: {}
    },
    {
        type: 'line',
        data: [],
        stack: 'all',
        areaStyle: {}
    }
]

散点图

x轴和y轴数据：二维数组

常见效果

气泡图效果

symbolSize、itemStyle

series: [
    {
        type: 'scatter',
        data: [],
        // symbolSize: 10
        symbolSize: function(arg){
            const height = arg[0] / 100
            const weight = arg[1]
            const bmi = weight / (height * height)
            if(bmi > 28) {
                return 20
            }
            return 5
        },
        /*
        itemStyle: {
            color: 'green'
        }
        */
        itemStyle: function(arg){
            const height = arg[0] / 100
            const weight = arg[1]
            const bmi = weight / (height * height)
            if(bmi > 28) {
                return 'red'
            }
            return 'green'
        }
    }
]

涟漪动画效果

type:'effectScatter'

showEffectOn:'emphasis：当鼠标移入时才显示效果

直角坐标系的常用配置
1. 网格 grid
  控制直角坐标系的布局和大小
  grid: {
  show: true,
  borderWidth: 10,
  borderColor: 'red',
  left: 120,
  top: 120,
  width: 300,
  height: 150
  }
2. 坐标轴 axis
  坐标轴分为 x轴和 y轴
  
  一个 grid 中最多有两种位置的 x轴和 y轴
  - 坐标轴类型 type
    
    value：数值轴，自动会从目标数据中读取数据
    
    category：类目轴，该类型必须通过 data 设置类目数据
  - 显示位置 position
    
    xAxis：可取值为 top 或者 bottom
    
    yAxis：可取值为 left 或者 right
3. 区域缩放 dataZoom
  对数据范围过滤，x轴和 y轴都可以拥有
  
  dataZoom 是一个数组，意味着可以配置多个区域缩放器
  - 类型 type
    
    slider：滑块
    
    inside：内置，依靠鼠标滚轮或者双指缩放
  - 指明产生作用的轴
    
    xAxisIndex：设置缩放组件控制的是哪个 x轴，一般写0
    
    yAxisIndex：设置缩放组件控制的是哪个 y轴，一般写0
  - 指明初始状态的缩放
    
    start：数据窗口范围的起始百分比
    
    end：数据窗口范围的结束百分比
  dataZoom: [
  {
  type: 'inside',
  xAxisIndex: 0
  },
  {
  type: 'inside',
  yAxisIndex: 0,
  start: 0,
  end: 80
  }
  ]

饼图

实现步骤：

ECharts最基本的代码结构：

引入js文件、DOM容器、初始化对象、设置option
数据准备：

{name:"淘宝", value: 11231}

图表类型：

在series下设置 type:pie

const option = {
    series: [
        {
            type: 'pie',
            data: pieData,
            label: {                         // 饼图文字显示
                show: true,                  // 显示文字
                formatter: function(arg){    // 决定文字显示内容
                    console.log(arg)
                    return arg.name
                }
            },
            radius: '20%',                   // 饼图的半径：百分比参照的是宽度和高度中较小那部分的一半来设置
            radius: ['50%', '75%'],          // 第0个元素代表的是内圆的半径，第1个元素代表的是外圆的半径
    		roseType: 'radius',              // 南丁格尔图：饼图的每一个区域的半径是不同的
    		selectedMode: 'single',          // 选中的效果，能够将选中的区域偏离圆点一小段距离single|multiple
    		selectedOffset: 30,              // 偏移量
        }
    ]
}

地图

矢量地图的实现步骤

ECharts最基本的代码结构：

引入js文件，DOM容器，初始化对象，设置option
准备中国的矢量地图 json 文件，放在 json/map/ 的目录下：

china.json

使用 Ajax 获取 china.json：

$.get('json/map/china.json', function(chinaJson){
    
})

在回调函数中往echarts全局对象注册地图的 json 数据：
echarts.registerMap('chinaMap', chinaJson);
在 geo 下设置
type: 'map'
map: 'chinaMap'

<body>
    <div style="width: 600px; height: 400px;"></div>
    
    <script>
    const mCharts = echarts.init(document.querySelector("div"))
    $.get('json/map/china.json', function(ret){
        // ret 是中国各个省份的矢量地图数据
        // console.log(ret)
        echarts.registerMap('chinaMap', chinaJson);
        
    })
    const option = {
    	geo: {
            type: 'map',
            map: 'chinaMap',  // chinaMap需要和registerMap中的第一个参数保持一致
        }
    }
    mCharts.setOption(option)
    </script>
</body>

常用配置

缩放拖动：

roam

geo: {
    type: 'map',
    map: 'chinaMap',  // chinaMap需要和registerMap中的第一个参数保持一致
    roam: true,       // 设置允许缩放以及拖动的效果
}

名称显示：

label

geo: {
    type: 'map',
    map: 'chinaMap',  // chinaMap需要和registerMap中的第一个参数保持一致
    roam: true,       // 设置允许缩放以及拖动的效果
    label: {
        show: true,   // 
    }
}

初始化缩放比例：

zoom

geo: {
    type: 'map',
    map: 'chinaMap',  // chinaMap需要和registerMap中的第一个参数保持一致
    roam: true,       // 设置允许缩放以及拖动的效果
    label: {
        show: true,   // 展示标签
    },
    zoom: 2,          // 2倍
}

地图中心点：

center

geo: {
    type: 'map',
    map: 'chinaMap',  // chinaMap需要和registerMap中的第一个参数保持一致
    roam: true,       // 设置允许缩放以及拖动的效果
    label: {
        show: true,   // 展示标签
    },
    zoom: 2,          // 2倍
    center: [87.617733, 43.792818]     
}

显示某个区域：
1. 加载该区域的矢量地图数据
2. 通过 registerMap 注册到 echarts 全局对象中
3. 指明 geo 配置下的 type 和 map 属性
4. 通过 zoom 放大该区域
5. 通过 center 定位中心点

不同城市颜色不同：

显示基本的中国地图
城市的空气质量数据设置给 series
将 series 下的数据和 geo 关联起来
geoIndex:0
type:'map'
结合 visualMap 配合使用

min、max、inRange、calculable

<body>
    <div style="width: 600px; height: 400px;"></div>
    
    <script>
    const airData = [
        { name: '北京', value: 39 }
    ]
    const mCharts = echarts.init(document.querySelector("div"))
    $.get('json/map/china.json', function(ret){
        // ret 是中国各个省份的矢量地图数据
        // console.log(ret)
        echarts.registerMap('chinaMap', chinaJson);
        
    })
    const option = {
    	geo: {
            type: 'map',
            map: 'chinaMap',  // chinaMap需要和registerMap中的第一个参数保持一致
            roam: true,       // 设置允许缩放以及拖动的效果
    		label: {
        		show: true,   // 展示标签
    		},
        },
        series: [
            {
                data: airData,
                geoIndex: 0,  // 将空气质量的数据和第0个geo配置关联在一起
                type: 'map'
            }
        ],
        visualMap: {
            min: 0,
            max: 300,
            inRange: {
                color: ['white', 'red']   // 控制颜色渐变的范围
            },
            calculable: true
        }
    }
    mCharts.setOption(option)
    </script>
</body>

地图和散点图结合使用

给 series 下增加新的对象
准备好散点数据，设置给新对象的 data
配置新对象的type

type:effectScatter
让散点图使用地图坐标系统

coordinateSystem:'geo'
让涟漪动画的效果更加明显
rippleEffect:{
scale: 10
}

<body>
    <div style="width: 600px; height: 400px;"></div>
    
    <script>
    const airData = [
        { name: '北京', value: 39 }
    ]
    const mCharts = echarts.init(document.querySelector("div"))
    $.get('json/map/china.json', function(ret){
        // ret 是中国各个省份的矢量地图数据
        // console.log(ret)
        echarts.registerMap('chinaMap', chinaJson);
        
    })
    const option = {
    	geo: {
            type: 'map',
            map: 'chinaMap',              // chinaMap需要和registerMap中的第一个参数保持一致
            roam: true,                   // 设置允许缩放以及拖动的效果
    		label: {
        		show: true,               // 展示标签
    		},
        },
        series: [
            {
                data: airData,
                geoIndex: 0,              // 将空气质量的数据和第0个geo配置关联在一起
                type: 'map'
            },
            {
                data: scatterData,        // 配置散点的坐标数据
                type: 'effectScatter',
                coordinateSystem:'geo',   // 指明散点使用的坐标系统，geo的坐标系统
                rippleEffect: {
                    scale: 10             // 设置涟漪动画的缩放比例
                }
            }
        ],
        visualMap: {
            min: 0,
            max: 300,
            inRange: {
                color: ['white', 'red']   // 控制颜色渐变的范围
            },
            calculable: true
        }
    }
    mCharts.setOption(option)
    </script>
</body>

雷达图

实现步骤：

ECharts最基本的代码结构：

引入js文件，DOM容器，初始化对象，设置option
定义各个维度的最大值，通过 radar 属性设置：
indicator:[{name: '易用性', max: 100}, ...]
准备具体产品的数据，设置给 series 下的 data：
data:[{name:'华为手机', value:[80,90,80,82,90]},...]
图标类型：

在series下设置 type:radar

常用配置
- 显示数值
  
  label
- 区域面积
  areaStyle: {},
- 绘制类型
  
  shape

<body>
    <div style="width: 600px; height: 400px;"></div>
    
    <script>
    const mCharts = echarts.init(document.querySelector("div"))
    const dataMax = [
        {
            name: '易用性',
            max: 100
        },
        {
            name: '功能',
            max: 100
        },
        {
            name: '拍照',
            max: 100
        }
    ]
    const option = {
    	radar: {
            indicator: dataMax,               // 配置各个维度的最大值
            shape: 'circle',                  // 配置雷达图最外层的图形展示
        },
        series: [
            {
                type:radar,                   // 雷达图
                label: {                      // 设置标签的样式
                    show: true                // 显示数值
                },
                areaStyle: {},                // 将每一个产品的雷达图形成阴影的面积
                data: [
                    {
                        name:'华为手机', 
                        value:[80,90,80]
                    },
                    {
                        name: 'oppo',
                        value:[90,80,92]
                    }
                ]
            }
        ]
    }
    mCharts.setOption(option)
    </script>
</body>

仪表盘

主要作用在进度把控以及数据范围的监测

实现步骤

ECharts最基本的代码结构

引入js文件，DOM容器，初始化对象，设置option
准备数据，设置给 series 下的data

data:[{value: 97}]
图标类型：

在series下设置 type:gauge

<body>
    <div style="width: 600px; height: 400px;"></div>
    
    <script>
    const mCharts = echarts.init(document.querySelector("div"))
    const option = {
    	series: [
            {
                type:gauge,
                data: [
                    {
                        value: 97
                    } // 每一个对象代表一个指针
                ]
            }
        ]
    }
    mCharts.setOption(option)
    </script>
</body>

常见配置

数值范围：

max、min
多个指针：

增加 data 中的数组元素
多个指针颜色差异：

itemStyle

<body>
    <div style="width: 600px; height: 400px;"></div>
    
    <script>
    const mCharts = echarts.init(document.querySelector("div"))
    const option = {
    	series: [
            {
                type:gauge,
                data: [
                    {
                        value: 97,
                        itemStyle: {         // 指针样式
                            color: 'pink'    // 指针颜色
                        }
                    },                       // 每一个对象代表一个指针
                    {
                        value: 85,
                        itemStyle: {
                            color: 'green'
                        }
                    }
                ],
                min: 50,                     // min max 控制仪表盘数值范围
            }
        ]
    }
    mCharts.setOption(option)
    </script>
</body>

ECharts

一、ECharts的介绍

二、ECharts的基本使用

ECharts快速上手

相关配置项

三、EChasrts常见图表

柱状图

常见效果

通用配置

折线图

散点图

直角坐标系的常用配置

网格 grid

坐标轴 axis

区域缩放 dataZoom

饼图

地图

雷达图

仪表盘