发布时间：2025-12-10 11:39:28 浏览次数：12
ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求，遵循 Apache-2.0 开源协议，免费商用，ECharts 兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等）及兼容多种设备，可展示各类图表。
ECharts 特性:
丰富的可视化类型: 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
多种数据格式无需转换直接使用: 内置的 dataset 属性（4.0+）支持直接传入包括二维表，key-value 等多种格式的数据源，此外还支持输入 TypedArray 格式的数据。
千万数据的前端展现: 通过增量渲染技术（4.0+），配合各种细致的优化，ECharts 能够展现千万级的数据量。
移动端优化: 针对移动端交互做了细致的优化，例如移动端小屏上适于用手指在坐标系中进行缩放、平移。 PC 端也可以用鼠标在图中进行缩放（用鼠标滚轮）、平移等。
多渲染方案，跨平台使用: 支持以 Canvas、SVG（4.0+）、VML 的形式渲染图表。
深度的交互式数据探索: 提供了 图例、视觉映射、数据区域缩放、tooltip、数据刷选等开箱即用的交互组件，可以对数据进行多维度数据筛取、视图缩放、展示细节等交互操作。
多维数据的支持以及丰富的视觉编码手段: 对于传统的散点图等，传入的数据也可以是多个维度的。
动态数据: 数据的改变驱动图表展现的改变。
绚丽的特效: 针对线数据，点数据等地理数据的可视化提供了吸引眼球的特效。
通过 GL 实现更多更强大绚丽的三维可视化: 在 VR，大屏场景里实现三维的可视化效果。
无障碍访问（4.0+）: 支持自动根据图表配置项智能生成描述，使得盲人可以在朗读设备的帮助下了解图表内容，让图表可以被更多人群访问！
ECharts安装方式有多种:
其中 option 表示使用 json 数据格式的配置来绘制图表:
标题
为图表配置标题：
提示信息
配置提示信息：
图例组件
图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
X 轴
配置要在 X 轴显示的项:
Y 轴
配置要在 Y 轴显示的项:
系列列表
每个系列通过 type 决定自己的图表类型:
每个系列通过 type 决定图表的类型,具体如下:
例子:
<!DOCTYPE html><html><head><meta charset="utf-8"><title>第一个 ECharts 实例</title><!-- 引入 echarts.js --><script src="lib/echarts.js"></script></head><body><!-- 为ECharts准备一个具备大小（宽高）的Dom --><p ></p><script type="text/javascript">// 基于准备好的dom，初始化echarts实例var testChart = echarts.init(document.getElementById('main'));// 绘制图表testChart.setOption({title: {text: 'ECharts 入门演示'},tooltip: {},xAxis: {data: ['java', 'python', 'php', 'c语言', 'javascript', 'c++']},yAxis: {},series: [{name: '排名',type: 'line',data: [2, 1, 5, 3, 6, 7]}]});</script></body></html>饼图主要是通过扇形的弧度表现不同类目的数据在总和中的占比，它的数据格式比柱状图更简单，只有一维的数值，不需要给类目。因为不在直角坐标系上，所以也不需要 xAxis，yAxis。
<!DOCTYPE html><html><head><meta charset="utf-8"><title>ECharts 图饼</title><!-- 引入 echarts.js --><script src="lib/echarts.js"></script></head><body><!-- 为ECharts准备一个具备大小（宽高）的Dom --><p ></p><script type="text/javascript">// 基于准备好的dom，初始化echarts实例var testChart = echarts.init(document.getElementById('main'));testChart.setOption({series : [{name: '使用比例',type: 'pie', // 设置图表类型为饼图radius: '55%', // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。data:[ // 数据数组，name 为数据项名称，value 为数据项值{value:3, name:'java'},{value:3, name:'python'},{value:2, name:'php'},{value:1, name:'javascript'},{value:1, name:'c#'}]}]})</script></body></html>ECharts 可以通过样式设置来改变图形元素或者文字的颜色、明暗、大小等。
颜色主题
ECharts4 开始，除了默认主题外，内置了两套主题，分别为 light 和 dark。
使用方式如下：
例子:
<!DOCTYPE html><html><head><meta charset="utf-8"><title>ECharts 图饼</title><!-- 引入 echarts.js --><script src="lib/echarts.js"></script></head><body><!-- 为ECharts准备一个具备大小（宽高）的Dom --><p ></p><script type="text/javascript">// 基于准备好的dom，初始化echarts实例var testChart = echarts.init(document.getElementById('main'), 'dark'); // dark 可修改为 lighttestChart.setOption({series : [{name: '使用比例',type: 'pie', // 设置图表类型为饼图radius: '55%', // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。data:[ // 数据数组，name 为数据项名称，value 为数据项值{value:3, name:'java'},{value:3, name:'python'},{value:2, name:'php'},{value:1, name:'javascript'},{value:1, name:'c#'}]}]})</script></body></html>如果你使用 JS 版本，可以将 JS 主题代码保存一个 主题名.js 文件，例如:westeros.js然后在 HTML 中引用该文件，最后在代码中使用该主题。
<!-- 引入主题 --><script src="lib/westeros.js"></script>...// HTML 引入 westeros.js 文件后，在初始化的时候调用var testChart = echarts.init(dom, 'westeros');// ...如果主题保存为 JSON 文件，那么可以自行加载和注册。
调色盘
调色盘可以在 option 中设置。
调色盘给定了一组颜色，图形、系列会自动从其中选择颜色,可以设置全局的调色盘，也可以设置系列自己专属的调色盘。
直接的样式设置 itemStyle, lineStyle, areaStyle, label, …
直接的样式设置是比较常用设置方式。ECharts 中 的option可以设置 itemStyle、lineStyle、areaStyle、label (图形元素的颜色、线宽、点的大小、标签的文字、标签的样式)等等。
高亮的样式：emphasis
在鼠标悬浮到图形元素上时，一般会出现高亮的样式。默认情况下，高亮的样式是根据普通样式自动生成的。
如果要自定义高亮样式可以通过emphasis 属性来定制：
例子:
<!DOCTYPE html><html><head><meta charset="utf-8"><title>ECharts 图饼</title><!-- 引入 echarts.js --><script src="lib/echarts.js"></script></head><body><!-- 为ECharts准备一个具备大小（宽高）的Dom --><p ></p><script type="text/javascript">// 基于准备好的dom，初始化echarts实例var testChart = echarts.init(document.getElementById('main')); // dark 可尝试修改为 lighttestChart.setOption({series : [{name: '使用比例',type: 'pie', // 设置图表类型为饼图radius: '55%', // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度//// 高亮样式。emphasis: {itemStyle: {// 高亮时点的颜色color: 'yellow'},label: {show: true,// 高亮时标签的文字formatter: '我是高亮时显示的标签内容'}},data:[ // 数据数组，name 为数据项名称，value 为数据项值{value:3, name:'java'},{value:3, name:'python'},{value:2, name:'php'},{value:1, name:'javascript'},{value:1, name:'c#'}]}]})</script></body></html>结果:
ECharts 通常数据设置在 setOption 中，如果我们需要异步加载数据，可以配合 jQuery等工具，在异步获取数据后通过 setOption 填入数据和配置项即可。 json 数据： 例如:
{data:[ // 数据数组，name 为数据项名称，value 为数据项值{value:3, name:'java'},{value:3, name:'python'},{value:2, name:'php'},{value:1, name:'javascript'},{value:1, name:'c#'}]}数据的动态更新
ECharts 由数据驱动，数据的改变驱动图表展现的改变，因此动态数据的实现也变得异常简单。所有数据的更新都通过 setOption 实现，只需要定时获取数据，setOption 填入数据，而不用考虑数据到底产生了那些变化，ECharts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。
例子:
var base = +new Date(2020, 7, 7);var oneDay = 24 * 3600 * 1000;var date = [];var data = [Math.random() * 150];var now = new Date(base);function addData(shift) {now = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/');date.push(now);data.push((Math.random() - 0.4) * 10 + data[data.length - 1]);if (shift) {date.shift();data.shift();}now = new Date(+new Date(now) + oneDay);}for (var i = 1; i < 100; i++) {addData();}option = {xAxis: {type: 'category',boundaryGap: false,data: date},yAxis: {boundaryGap: [0, '50%'],type: 'value'},series: [{name:'成交',type:'line',smooth:true,symbol: 'none',stack: 'a',areaStyle: {normal: {}},data: data}]};setInterval(function () {addData(true);textChart.setOption({xAxis: {data: date},series: [{name:'成交',data: data}]});}, 500);// 基于准备好的dom，初始化echarts实例var textChart = echarts.init(document.getElementById('main'));textChart.setOption(option)结果:
ECharts 使用 dataset管理数据,dataset 组件用于单独的数据集声明，从而数据可以单独管理，被多个组件复用，并且可以基于数据指定数据到视觉的映射。
<script type="text/javascript">// 基于准备好的dom，初始化echarts实例var testChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据var option = {legend: {},tooltip: {},dataset: {// 提供一份数据。source: [['language', '2017', '2018', '2019','2020'],['java', 43.3,65.7, 85.8, 93.7],['python', 85.8,83.1, 73.4, 55.1],['php', 86.4,73.4, 65.2, 82.5],['javascript', 72.4, 53.9,45.7, 39.1]]},// 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。xAxis: {type: 'category'},// 声明一个 Y 轴，数值轴。yAxis: {},// 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。series: [{type: 'bar'},{type: 'bar'},{type: 'bar'},{type: 'bar'}]};// 使用刚指定的配置项和数据显示图表。testChart.setOption(option);</script>结果:
数据到图形的映射
可以在配置项中将数据映射到图形中,使用series.seriesLayoutBy属性来配置 dataset 是列（column）还是行（row）映射为图形系列（series），默认是按照列（column）来映射。
结果:
使用 series.encode 属性将对应的数据映射到坐标轴（如 X、Y 轴）：
结果:
视觉通道（颜色、尺寸等）的映射
可以使用 visualMap 组件进行视觉通道的映射。
视觉元素可以是：
visualMap组件可以定义多个，从而可以同时对数据中的多个维度进行视觉映射。
var option = {dataset: {source: [['score', 'amount', 'product'],[89.3, 58212, 'java'],[57.1, 78254, 'python'],[74.4, 41032, 'c语言'],[50.1, 12755, 'php'],[89.7, 20145, 'javascript'],[68.1, 79146, 'css'],[19.6, 91852, 'html'],[10.6, 101852, 'go'],[32.7, 20112, 'Vue']]},grid: {containLabel: true},xAxis: {name: 'amount'},yAxis: {type: 'category'},visualMap: {orient: 'horizontal',left: 'center',min: 10,max: 100,text: ['High Score', 'Low Score'],// Map the score column to colordimension: 0,inRange: {color: ['#93d698', '#ef6d6d']}},series: [{type: 'bar',encode: {// Map the "amount" column to X axis.x: 'amount',// Map the "product" column to Y axisy: 'product'}}]};结果:
交互联动
多个图表共享一个 dataset，并带有联动交互：
结果:
ECharts 提供了很多交互组件：组件 legend、标题组件 title、视觉映射组件 visualMap、数据区域缩放组件 dataZoom、时间线组件 timeline。
dataZoom
dataZoom 组件可以实现通过鼠标滚轮滚动，放大缩小图表的功能。
默认情况下 dataZoom 控制 x 轴，即对 x 轴进行数据窗口缩放和数据窗口平移操作。实例拖动 dataZoom 组件来缩小或放大图表。
结果:
如果想在坐标系内进行拖动，以及用鼠标滚轮（或移动触屏上的两指滑动）进行缩放，那么需要 再再加上一个 inside 型的 dataZoom 组件。
通过 dataZoom.xAxisIndex 或 dataZoom.yAxisIndex 来指定 dataZoom 控制哪个或哪些数轴.
var data1 = [];var data2 = [];var data3 = [];var random = function (max) {return (Math.random() * max).toFixed(3);};for (var i = 0; i < 500; i++) {data1.push([random(15), random(10), random(1)]);data2.push([random(10), random(10), random(1)]);data3.push([random(15), random(10), random(1)]);}option = {animation: false,legend: {data: ['scatter', 'scatter2', 'scatter3']},tooltip: {},xAxis: {type: 'value',min: 'dataMin',max: 'dataMax',splitLine: {show: true}},yAxis: {type: 'value',min: 'dataMin',max: 'dataMax',splitLine: {show: true}},dataZoom: [{type: 'slider',show: true,xAxisIndex: [0],start: 1,end: 35},{type: 'slider',show: true,yAxisIndex: [0],left: '93%',start: 29,end: 36},{type: 'inside',xAxisIndex: [0],start: 1,end: 35},{type: 'inside',yAxisIndex: [0],start: 29,end: 36}],series: [{name: 'scatter',type: 'scatter',itemStyle: {normal: {opacity: 0.8}},symbolSize: function (val) {return val[2] * 40;},data: data1},{name: 'scatter2',type: 'scatter',itemStyle: {normal: {opacity: 0.8}},symbolSize: function (val) {return val[2] * 40;},data: data2},{name: 'scatter3',type: 'scatter',itemStyle: {normal: {opacity: 0.8,}},symbolSize: function (val) {return val[2] * 40;},data: data3}]}结果:
免责声明：本站内容（文字信息+图片素材）来源于互联网公开数据整理或转载，仅用于学习参考，如有侵权问题，请及时联系本站删除，我们将在5个工作日内处理。联系邮箱：303555158#qq.com（把#换成@）
微信便捷交流