数据可视化ECharts快速上手

ChenChenChen
273 阅读8分钟

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

一、ECharts的介绍

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

echarts.apache.org/zh/option.h…

二、ECharts的基本使用

  1. 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>

  2. 相关配置项

    • xAxis：直角坐标系 中的 x 轴

      • type:'category'：类目轴

    • yAxis：直角坐标系 中的 y 轴

      • type:'value'：数值轴

    • series：系列列表，每个系列通过 type 决定自己的图标类型

      • type:'pic'：图标类型

      其他见官方文档

三、EChasrts常见图表

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

  1. 柱状图

    • 常见效果

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

        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: ['语文', '数学']
}

  2. 折线图

    • 常见效果

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

        前三个和柱状图一样

        标注区间：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: {}
    }
]

  3. 散点图

    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：当鼠标移入时才显示效果

  4. 直角坐标系的常用配置

    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
    }
]

  5. 饼图

    实现步骤：

    • 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,              // 偏移量
        }
    ]
}

  6. 地图

    矢量地图的实现步骤

    • 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 定位中心点

      • 不同城市颜色不同：

        1. 显示基本的中国地图

        2. 城市的空气质量数据设置给 series

        3. 将 series 下的数据和 geo 关联起来

          geoIndex:0
type:'map'

        4. 结合 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>

      • 地图和散点图结合使用

        1. 给 series 下增加新的对象

        2. 准备好散点数据，设置给新对象的 data

        3. 配置新对象的type

          type:effectScatter

        4. 让散点图使用地图坐标系统

          coordinateSystem:'geo'

        5. 让涟漪动画的效果更加明显

          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>

  7. 雷达图

    实现步骤：

    1. ECharts最基本的代码结构：

      引入js文件，DOM容器，初始化对象，设置option

    2. 定义各个维度的最大值，通过 radar 属性设置：

      indicator:[{name: '易用性', max: 100}, ...]

    3. 准备具体产品的数据，设置给 series 下的 data：

      data:[{name:'华为手机', value:[80,90,80,82,90]},...]

    4. 图标类型：

      在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>

  8. 仪表盘

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

    实现步骤

    1. ECharts最基本的代码结构

      引入js文件，DOM容器，初始化对象，设置option

    2. 准备数据，设置给 series 下的data

      data:[{value: 97}]

    3. 图标类型：

      在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>
avatar
文章
阅读
粉丝