首页 前端知识 数据可视化-Echarts

数据可视化-Echarts

2024-02-28 11:02:30 前端知识 前端哥 138 551 我要收藏

Echarts

Echarts是一个基于JavaScript的开源可视化库,可以用于创建各种复杂的数据可视化图表。Echarts提供了一系列API,可以方便地操作数据和图表,实现各种数据可视化效果。

绘制图表的步骤

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入下载的 ECharts 文件 -->
    <script src="echarts.js"></script>
  </head>
  <body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
      // 基于准备好的dom,初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));

      // 指定图表的配置项和数据
      var option = {
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    </script>
  </body>
</html>

ECharts 渲染原理

ECharts的渲染原理主要分为两个阶段:布局计算和绘制渲染。

  1. 布局计算阶段

在布局计算阶段,ECharts会根据option配置项中的各种属性和数据,计算出图表的布局和各个组件的位置和大小。具体来说,ECharts会进行以下计算:

  • 计算图表的大小和位置,包括画布大小、图表边距、坐标轴位置等。
  • 计算各个组件的位置和大小,包括标题、图例、坐标轴、系列等组件。
  • 计算数据的范围和刻度,包括坐标轴的数据范围、刻度间隔、标签等。
  1. 绘制渲染阶段

在绘制渲染阶段,ECharts会根据布局计算阶段的结果,使用Canvas或SVG等技术,将图表的各个组件和数据绘制出来。具体来说,ECharts会进行以下操作:

  • 绘制背景和边框,包括画布背景、图表边框等。
  • 绘制各个组件,包括标题、图例、坐标轴、系列等组件。
  • 绘制数据,包括折线、柱状、饼图等不同类型的数据。
  • 添加交互和动画效果,包括鼠标事件、数据筛选、数据动画等。

需要注意的是,ECharts的渲染原理是基于浏览器的Canvas或SVG技术实现的,因此在使用ECharts时,需要确保浏览器支持Canvas或SVG技术,并且需要注意图表的性能和兼容性问题。同时,ECharts还提供了WebGL渲染和Canvas2D渲染两种渲染方式,可以根据具体情况选择合适的渲染方式。ECharts 最开始时一直都是使用 Canvas 绘制图表。直到 ECharts v4.0 版本,才发布支持 SVG 渲染器。SVG 和 Canvas 这两种使用方式在技术上是有很大的差异的,EChart能够做到同时支持,主要归功于 ECharts 底层库 ZRender 的抽象和实现。

ZRender 是二维轻量级的绘图引擎,它提供 Canvas、SVG、VML 等多种渲染方式。因此,Echarts 可以轻松的互换SVG 渲染器 和 Canvas 渲染器。

// 引入 ECharts
import echarts from 'echarts';

// 获取需要渲染图表的 DOM 元素
const chartDom = document.getElementById('chart');

// 初始化图表
const myChart = echarts.init(chartDom, null, {
  renderer: 'svg' // 设置渲染方式为 SVG
});

// 设置图表配置项和数据
const option = {
  // ...
};

// 将配置项和数据传入图表实例中
myChart.setOption(option);

在初始化图表时,可以通过第三个参数传入一个对象来设置渲染方式。其中,renderer 属性用于设置渲染方式,可以设置为 'canvas''svg'。在这里,我们将其设置为 'svg',即可使用 SVG 渲染图表。

认识option配置项

在Echarts中,option是用于配置图表的一个对象,包含了图表的各种配置项。以下是option对象中常用的一些配置项:

  1. title:图表的标题,包括主标题和副标题。
  2. tooltip:提示框组件,用于显示数据项的详细信息。
  3. legend:图例组件,用于展示不同系列的标记和名称。
  4. grid:直角坐标系内绘图网格,用于控制图表的布局和间距。
  5. xAxisyAxis:直角坐标系的横轴和纵轴,用于控制坐标轴的样式和数据范围。
  6. series:系列列表,用于定义不同系列的数据和样式。
  7. toolbox:工具箱组件,包括导出图片、数据视图、动态类型切换等工具。
  8. dataZoom:数据区域缩放组件,用于控制数据的缩放和滚动。
  9. visualMap:视觉映射组件,用于将数据映射到颜色、大小等视觉元素上。

Grid网格配置

Grid组件是ECharts中的一个基础组件,用于控制直角坐标系的位置、大小以及刻度等

option = {
  // ... 其他配置项
  grid: {
    left: '3%', // 网格左侧距离容器的距离
    right: '4%', // 网格右侧距离容器的距离
    bottom: '3%', // 网格底部距离容器的距离
    containLabel: true // 是否包含坐标轴标签
  },
  xAxis: {
    // ... x 轴配置项
  },
  yAxis: {
    // ... y 轴配置项
  },
  series: [{
    // ... 数据系列配置项
  }]
};
  • left:Grid组件离容器左侧的距离。
  • right:Grid组件离容器右侧的距离。
  • bottom:Grid组件离容器底部的距离。
  • containLabel:是否包含坐标轴的刻度标签。
  • show:来控制Grid组件的显示。

坐标系配置

ECharts中的坐标系配置包括直角坐标系、极坐标系、地图和3D坐标系等。不同类型的坐标系具有不同的配置项,但它们都有一些共同的配置项,例如xAxisyAxisgrid

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar'
    }]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

在这个示例中,我们创建了一个直角坐标系,并使用xAxisyAxis配置了坐标轴。具体来说,我们将xAxis的类型设置为category,并设置了坐标轴的刻度标签。我们将yAxis的类型设置为value,表示该坐标轴的值为数值类型。我们还使用grid配置了直角坐标系的位置和大小。

ECharts中的xAxis选项用于配置直角坐标系的横轴。以下是xAxis选项的一些常用配置:

  • type:坐标轴类型
    • 可选值为valuecategorytimelog等。
  • data:坐标轴刻度标签的内容,类型为数组。
  • name:坐标轴名称。
  • nameLocation:坐标轴名称的位置,可选值为startmiddleend
  • nameTextStyle:坐标轴名称的样式。
  • axisLabel:坐标轴刻度标签的样式。
  • axisLine:坐标轴轴线的样式。
  • axisTick:坐标轴刻度线的样式。
  • splitLine:坐标轴分隔线的样式。

ECharts中的series选项用于配置数据系列,例如折线图、柱状图、散点图等。以下是series选项的一些常用配置:

  • type:数据系列的类型,可选值为linebarscatter等。
  • name:数据系列的名称。
  • data:数据系列的数据,类型为数组。
  • symbol:数据点的图形,可选值为circlerecttriangle等。
  • symbolSize:数据点的大小。
  • itemStyle:数据点的样式。
  • label:数据标签的样式。
  • lineStyle:线条的样式(仅适用于折线图和散点图)。
  • barWidth:柱状图的宽度(仅适用于柱状图)。
  • barGap:柱状图之间的间隔(仅适用于柱状图)。
  • barCategoryGap:同一系列的柱状图之间的间隔(仅适用于柱状图)。
option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: '销量',
        type: 'bar',
        data: [120, 200, 150, 80, 70, 110, 130],
        itemStyle: { // 数据点的样式
            color: '#3398DB'
        },
        label: { // 数据标签的样式
            show: true,
            position: 'top',
            color: '#333'
        }
    }]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

ECharts中的series选项可以通过emphasis属性来配置数据系列的高亮样式。以下是emphasis属性的一些常用配置:

  • itemStyle:高亮时数据点的样式。
  • label:高亮时数据标签的样式。
  • lineStyle:高亮时线条的样式(仅适用于折线图和散点图)。
  • areaStyle:高亮时区域的样式(仅适用于堆叠区域图)。
option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: '销量',
        type: 'bar',
        data: [120, 200, 150, 80, 70, 110, 130],
        itemStyle: { 
          	// 数据点的样式
            color: '#3398DB'
        },
        label: { 
          	// 数据标签的样式
            show: true,
            position: 'top',
            color: '#333'
        },
        emphasis: { 
          	// 高亮时的样式
            itemStyle: {
                color: '#FFCC33'
            },
            label: {
                color: '#333'
            }
        }
    }]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

标题、图例、提示配置

ECharts中的标题、图例和提示分别对应着titlelegendtooltip选项。以下是它们的一些常用配置:

  • title:用于配置标题。
    • text:标题的文本内容。
    • subtext:副标题的文本内容。
    • left:标题的水平位置。
    • top:标题的垂直位置。
    • textStyle:标题的样式。
  • legend:用于配置图例。
    • data:图例的数据,类型为数组。
    • left:图例的水平位置。
    • top:图例的垂直位置。
    • textStyle:图例的样式。
  • tooltip:用于配置提示框。
    • trigger:提示框的触发方式,可选值为axisitemnone
    • axisPointer:坐标轴指示器的配置。
    • formatter:提示框的内容格式化函数。

柱形图

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: '销量',
        type: 'bar',
        data: [120, 200, 150, 80, 70, 110, 130],
        itemStyle: { // 数据点的样式
            color: '#3398DB'
        },
        label: { // 数据标签的样式
            show: true,
            position: 'top',
            color: '#333'
        }
    }]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

折线图

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: '销量',
        type: 'line',
        data: [120, 200, 150, 80, 70, 110, 130],
        itemStyle: { // 数据点的样式
            color: '#3398DB'
        },
        label: { // 数据标签的样式
            show: true,
            position: 'top',
            color: '#333'
        },
        lineStyle: { // 线条的样式
            color: '#3398DB'
        }
    }]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

饼图

option = {
    series: [{
        name: '访问来源',
        type: 'pie',
        radius: '50%',
        data: [
            {value: 335, name: '直接访问'},
            {value: 310, name: '邮件营销'},
            {value: 234, name: '联盟广告'},
            {value: 135, name: '视频广告'},
            {value: 1548, name: '搜索引擎'}
        ],
        itemStyle: { // 数据项的样式
            emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
        }
    }]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

地图绘制

ECharts 可以使用 GeoJSON 格式的数据作为地图的轮廓,可以获取第三方的 GeoJSON 数据注册到 ECharts 中:

  • [Natural Earth](vscode-file://vscode-app/Applications/Visual Studio Code - Insiders.app/Contents/Resources/app/out/vs/code/electron-sandbox/workbench/workbench.html):提供全球各种地理信息数据,包括国家、地区、城市、河流、湖泊等。
  • [GeoJSON.io](vscode-file://vscode-app/Applications/Visual Studio Code - Insiders.app/Contents/Resources/app/out/vs/code/electron-sandbox/workbench/workbench.html):提供在线编辑和创建GeoJSON数据的工具,可以手动绘制地图或上传现有的地图数据。
  • [OpenStreetMap](vscode-file://vscode-app/Applications/Visual Studio Code - Insiders.app/Contents/Resources/app/out/vs/code/electron-sandbox/workbench/workbench.html):提供全球各种地理信息数据,包括道路、建筑物、公园、商店等。
  • [阿里云数据可视化平台](DataV.GeoAtlas地理小工具系列 (aliyun.com)):生成范围与边界。

要在ECharts中使用GeoJSON数据,您可以使用geo组件来加载和显示数据。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
		// https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json let china = {}
    <script src="china.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
</head>
<body>
<div id="main" style="height:400px;"></div>
<script>
    echarts.registerMap('china', china);
    let myChart = echarts.init(document.getElementById('main'));
    // 方式一
    //let option = {
    //    geo: {
    //        map: "china"
    //    }
    //};
    //  方式二
    let option = {
        series: [
            {
                type: 'map',
                map: 'china'
            }
        ]
    };
    myChart.setOption(option);
</script>
</body>
</html>

要在ECharts中对地图的区域进行着色,您可以使用itemStyle配置项。

    let option = {
        geo: {
            map: "china",
            itemStyle: {
                areaColor: "red", // 地图区域的颜色
                borderColor: "blue" // 边缘颜色
            },
            emphasis: {
                itemStyle: {
                    areaColor: "#ccc"
                },
                label: {
                    show: true
                }
            }
        }
    };

visualMap是ECharts中的一个组件,用于在图表中展示数据的视觉映射。它可以将数据映射到颜色、大小、透明度等视觉元素上,帮助用户更直观地理解数据。

    let option = {
        tooltip: {
            show: true
        },
        series: [
            {
                type: 'map',
                map: 'china',
                itemStyle: {
                    areaColor: "#87939d",
                    borderColor: "white"
                },
                emphasis: {
                    itemStyle: {
                        areaColor: "#ccc"
                    },
                    label: {
                        show: true
                    }
                },
                data: [
                    {name: '山西省', value: 100},
                    {name: '北京市', value: 12},
                    {name: '天津市', value: 431},
                    {name: '上海市', value: 322},
                    {name: '重庆市', value: 123},
                    {name: '河北省', value: 123},
                ]
            }
        ],
        visualMap: [
            {
                left: '30%',
                bottom: '30%',
                seriesIndex: 0,
                inRange: {
                    color: ['#729bb6', '#006edd']
                },
            }
        ]
    };

常见 API

echarts

  • echarts.init(dom, theme):初始化一个ECharts实例,dom参数是一个DOM元素,theme参数是一个主题对象,可选。
  • echarts.dispose(dom):销毁一个ECharts实例,dom参数是一个DOM元素。
  • echarts.getInstanceByDom(dom):根据一个DOM元素获取对应的ECharts实例。
  • echarts.registerMap(mapName, geoJson, specialAreas):注册一个地图,mapName参数是地图的名称,geoJson参数是地图的GeoJSON数据,specialAreas参数是地图的特殊区域,可选。
  • echarts.getMap(mapName):获取一个已注册的地图,mapName参数是地图的名称。
  • echarts.convertToPixel(coordinateSystem, value):将坐标系上的值转换为像素坐标,coordinateSystem参数是坐标系对象,value参数是坐标系上的值。
  • echarts.convertFromPixel(coordinateSystem, pixel):将像素坐标转换为坐标系上的值,coordinateSystem参数是坐标系对象,pixel参数是像素坐标。

echartsInstance

  • echartsInstance. setOption(opts):设置图表实例的配置项以及数据,万能接口。
  • echartsInstance.resize: 是一个用于调整图表大小的方法。当图表所在的容器大小发生变化时,可以调用resize方法来重新绘制图表。
  • echartsInstance. showLoading()echartsInstance. hideLoading():显示和隐藏加载动画效果。

响应式图表

window.addEventListener('resize', function () {
    // 调用resize方法重新绘制图表
    myChart.resize();
});

轮播效果

dispatchAction是一个用于触发图表行为的方法,可以通过调用该方法来实现图表的交互效果。以下是一个示例,展示如何在ECharts中使用dispatchAction

// 初始化ECharts实例
var myChart = echarts.init(document.getElementById('myChart'));

// 配置选项
var option = {
    // ...
};

// 设置配置项并显示图表
myChart.setOption(option);

let index = 0;
function autoToolTip() {
    // 监听鼠标点击事件
    myChart.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: index,
        position: "top"
    });
}
setInterval(() => {
  autoToolTip()
}, 1000)

在这个示例中,我们首先初始化一个ECharts实例,并设置图表的配置选项。然后我们将配置项设置到图表中,并显示图表。接着,我们监听鼠标点击事件,并在事件处理函数中调用dispatchAction方法触发图表行为。

切换地图

在ECharts中,可以通过监听鼠标点击事件来实现点击切换地图的效果。具体来说,可以在事件处理函数中调用setOption方法更新图表的配置选项,从而切换到新的地图。

// 监听鼠标点击事件
myChart.on('click', function (params) {
  if (params.name === '某个区域') {
    $.getJSON('map2.json', function (data) {
      echarts.registerMap('map2', data);
      myChart.setOption({
        geo: {
          map: 'map2'
        },
      });
    });
  } else {
    myChart.setOption({
      geo: {
        map: 'map1'
      },
    });
  }
});
转载请注明出处或者链接地址:https://www.qianduange.cn//article/2888.html
评论
会员中心 联系我 留言建议 回顶部
复制成功!