数据可视化 Echarts绘图_echarts 3d 森林-优快云博客

ECharts 是一款由百度开发的开源的JavaScript可视化库，旨在提供直观、生动、可交互、可高度个性化定制的数据可视化图表。它支持折线图、柱状图、散点图、饼图、K线图、地图、词云图等多种图表，并且能够处理大数据量的实时数据流。ECharts 的设计考虑到了移动设备的适配，支持多种设备和平台，同时提供了丰富的图表动画和交互能力。

二、应用场景

1、数据分析与报表

在企业数据分析和报表系统中，Echarts 可以将数据以直观的图表形式展示出来，帮助用户快速理解数据的趋势、分布和关系。通过与后端数据接口的对接，可以实现实时数据更新，让用户随时掌握最新的业务情况。

2、数据可视化大屏

在大数据可视化大屏项目中，Echarts 能够展示海量数据，提供震撼的视觉效果。可以通过配置不同的图表和布局，将多个数据源的数据整合在一起，实现全面的数据监控和分析。

3、移动端应用

随着移动互联网的发展，Echarts 也可以在移动端应用中使用。通过适配移动端的触摸操作和屏幕尺寸，可以为用户提供便捷的数据可视化体验。

4、地理信息可视化

结合地图数据，Echarts 可以实现地理信息的可视化展示。例如，可以在地图上展示不同地区的数据分布、热点区域等，为地理数据分析和决策提供有力支持。

三、载入方法

ECharts 本质上是一个JavaScript库，使用时需要下载或者从网上引入。

在官网的下载页面中下载：https://echarts.apache.org/zh/index.html

其他途径下载，比如从GitHub上下载、使用npm工具来下载。此类方法不推荐非专业人员使用。

ECharts 的配置项非常丰富，涵盖了从图表的基本结构到复杂交互的各个方面。

配置项的内容非常多，更详细的内容大家可以参考官网文档“配置项手册”：https://echarts.apache.org/zh/option.html

四、绘图

导入数据并准备容器

导入所需要的数据（echarts文件所在的地址）

<script src="C:\Users\Administrator\Downloads/echarts.min.js"></script>

<script src="./数据.js"></script>

数据如下：

创建图所需要的容器大小

<div id="main" style="width: 800px;height: 400px;"></div>
    <div id="main2" style="width: 800px;height: 400px;"></div>
    <div id="main3" style="width: 800px;height: 400px;"></div>
    <div id="main4" style="width: 800px;height: 400px;"></div>

最终代码如下

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<script src="C:\Users\Administrator\Downloads/echarts.min.js"></script>

</head>

<body>

<div id="main" style="width: 800px;height: 400px;"></div>

<div id="main2" style="width: 800px;height: 400px;"></div>

<div id="main3" style="width: 800px;height: 400px;"></div>

<div id="main4" style="width: 800px;height: 400px;"></div>

<script src="./数据.js"></script>

<script src="./柱形图.js"></script>

<script src="./折线图.js"></script>

<script src="./饼图.js"></script>

<script src="./散点图.js"></script>

</body>

</html>

柱形图

基本配置项

series.type: 设置为 'bar'。
xAxis.data: 分类轴数据，即独立的 x 轴数据列表。
xAxis.type: 设置为 'category'。
series.data: 数值轴数据，即独立的 y 轴数据列表。
yAxis.type: 设置为 'value'。

效果图

代码如下：

var chartDom = document.getElementById('main');

var myChart = echarts.init(chartDom);

var option = {

xAxis: {

type: 'category',

data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],

},

yAxis: {

type: 'value'

},

series: [{

data: [120, 200, 150, 80, 70, 110, 130],

type: 'bar',

barWidth: '60%', // 指定柱子的宽度

barCategoryGap: '15%',

emphasis: {

focus: 'self' // 只聚焦（不淡出）当前高亮的数据的图形。

}

}]

};

//配置项配置到图形中

myChart.setOption(option);

饼图

基本配置项

series.type: 设置为 'pie'。
series.data: 一个对象数组，每个对象包含两个键值对，name 表示分类名称，value 表示数值。

效果图

代码如下：

var chartDom = document.getElementById('main3');

var myChart = echarts.init(chartDom);

//配置项

option3 = {

tooltip: {

trigger: 'item'

},

series: [{

name: 'Sales',

type: 'pie',

radius: '80%', // 设置内外半径，实现环形饼图

label: {

formatter: '{b}\n数量：{c}\n占比：{d}%' // 设置标签的文本格式

},

data: data.pieData.map(function(item) {

return {

name: item.name,

value: item.value

};

}),

emphasis: {

itemStyle: {

shadowBlur: 10,

shadowOffsetX: 0,

shadowColor: 'rgba(0, 0, 0, 0.5)'

}}

}],

};

//配置项配置到图形中

myChart.setOption(option3);

折线图

基本配置项

series.type: 设置为 'line'。
xAxis.data: 分类轴数据，即独立的 x 轴数据列表。
xAxis.type: 设置为 'category'。
series.data: 数值轴数据，即独立的 y 轴数据列表。
yAxis.type: 设置为 'value'。

效果图

代码如下：

var chartDom = document.getElementById('main2');

var myChart = echarts.init(chartDom);

//配置项

var option2 = {

xAxis: {

type: 'category',

data: data.lineData.categories

},

yAxis: {

type: 'value'

},

series: [{

name: data.lineData.series[0].name,

data: data.lineData.series[0].data,

type: 'line',

smooth: true, // 线条平滑处理

//areaStyle: {} // 开启面积填充

},

{

name: data.lineData.series[1].name,

data: data.lineData.series[1].data,

type: 'line',

smooth: true, // 线条平滑处理

//areaStyle: {} // 开启面积填充

}

],

legend:{}

};

//配置项配置到图形中

myChart.setOption(option2);

散点图

基本配置项

series.type: 设置为 'scatter'。
series.data: 一个二维数组，每个子数组包含 x 轴和 y 轴的数值。
xAxis: 不接收数据，只用作坐标轴样式设置，不设置样式时设置为空，即{}。
yAxis: 不接收数据，只用作坐标轴样式设置，不设置样式时设置为空，即{}。

效果图

代码如下：

var chartDom = document.getElementById('main4');

var myChart = echarts.init(chartDom);

//配置项

var option4 = {

tooltip: {

trigger: 'axis'

},

xAxis: {

type: 'value', name: 'x', // 设置x轴名称

nameTextStyle: {

fontSize: 30, // 设置字体大小

fontFamily: 'serif' // 设置字体系列

}},

yAxis: {

type: 'value',

name: 'y', // 设置y轴名称

nameTextStyle: {

fontSize: 30, // 设置字体大小

fontFamily: 'serif' // 设置字体系列

}

},

series: [{

name: '示例数据',

type: 'scatter',

symbolSize: 10,

data: data.scatterData,

}]

};

//配置项配置到图形中

myChart.setOption(option4);

地图

准备

导入地图数据

<script src="https://assets.pyecharts.org/assets/maps/china.js"></script>

基本配置项

series.type: 设置为 'map'。
series.mapType：地图的类型，由导入的地图js文件决定，例如导入了中国地图“china.js”，则maptype参数值就填“china”。
series.data: 一个对象数组，每个对象包含两个键值对，name表示地域名称，value表示数值。

series.label：控制地图地域名称标签的显示和样式。
series.roam：控制地图是否可以使用鼠标拖动、放缩。

效果图

代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<script src="C:\Users\Administrator\Downloads/echarts.min.js"></script>

<script src="../china.js"></script>

<script src="../geoCoord.js"></script>

</head>

<body>

<div id="main" style="width: 800px;height: 600px;"></div>

<script>

var chartDom = document.getElementById('main');

var myChart = echarts.init(chartDom);

var option = {

series: [{

type: 'map',

mapType:'china',

label:{

show:true

},

roam:true,

data: [

{ name: '北京', value: 10 },

{ name: '天津', value: 20 },

{ name: '广西', value: 20 },

{ name: '广东', value: 50 },

{ name: '湖南', value: 80 },

{ name: '河北', value: 30 },

{ name: '山西', value: 40 },

{ name: '辽宁', value: 25 },

{ name: '吉林', value: 15 },

{ name: '黑龙江', value: 12 },

{ name: '江苏', value: 60 },

{ name: '浙江', value: 45 },

{ name: '安徽', value: 35 },

{ name: '福建', value: 22 },

{ name: '江西', value: 55 },

{ name: '山东', value: 70 },

{ name: '河南', value: 30 },

{ name: '湖北', value: 45 },

{ name: '海南', value: 10 },

{ name: '重庆', value: 55 },

{ name: '四川', value: 75 },

{ name: '贵州', value: 40 },

{ name: '云南', value: 35 },

{ name: '陕西', value: 60 },

{ name: '甘肃', value: 25 },

{ name: '青海', value: 15 },

{ name: '台湾', value: 50 },

{ name: '内蒙古', value: 20 },

{ name: '西藏', value: 10 },

{ name: '宁夏', value: 15 },

{ name: '新疆', value: 30 },

],

}

],

tooltip:{},

visualMap:{}

};

myChart.setOption(option);

</script>

</body>

</html>

总结

使用echarts绘图有相对较高的优势，它功能强大能提供丰富多样的图表类型，涵盖了常见的折线图、柱状图、饼图、散点图、地图等，能满足各种数据可视化需求，并支持复杂的数据展示，可进行组合图表、仪表盘等高级可视化形式；而且它高度可定制，外观样式可灵活调整，包括颜色、字体、标题、坐标轴、图例等元素，适应不同设计风格和主题，具备数据动态更新和丰富的交互操作，如缩放、平移、鼠标悬停显示详情等，增强用户体验。