ECharts 绘制图表

mac2022-06-30 23

本文介绍一下如何使用ECharts框架绘制图形（说明：本文例子使用的是ECharts 3）

一、引入ECharts

ECharts 3 引入的方法和普通的JavaScript库一样，只需要一个script标签即可

<head lang="en"> <meta charset="UTF-8"> <title>firstChart</title>  <script type="text/javascript" src="JS/jquery-3.1.1.js"></script> <script src="JS/echarts.main.js"></script> </head>

二、为ECharts图形准备一个具有宽高的DOM容器

三、通过echarts.init方法初始化一个echarts实例并通过setOption方法生成一个简单的柱形图

完整代码如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>firstChart</title>  <script type="text/javascript" src="JS/jquery-3.1.1.js"></script> <script src="JS/echarts.main.js"></script> </head> <body>  <div id="myBarChart" style="width: 600px;height:400px;border: 1px solid ;"></div>  <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var barChart = echarts.init(document.getElementById('myBarChart')); // 指定图表的配置项和数据 var option = { title: { text: '各运行部年度总量' }, tooltip: {}, legend: { data:['当年值'] }, xAxis: { data: ["炼油一部","炼油二部","炼油三部","炼油四部","芳烃部","油品储运部","热点部"] }, yAxis: {}, series: [{ name: '当年值', type: 'bar', data: [5, 20, 36, 10, 10, 20, 33] }] }; // 使用刚指定的配置项和数据显示图表。 barChart.setOption(option); </script> </body> </html> 运行结果如下图：

四、完善图形，配置折线图和柱形图效果图如下：

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>firstChart</title>  <script type="text/javascript" src="JS/jquery-3.1.1.js"></script> <script src="JS/echarts.main.js"></script> </head> <body>  <div id="myBarChart" style="width: 600px;height:400px;border: 1px solid ;"></div>  <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var barChart = echarts.init(document.getElementById('myBarChart')); /*----------------------------柱形图和折线图---------------------------------*/ var barItemStyle = { /*设置柱子的样式风格*/ normal: {}, /*默认状态下，使用默认样式*/ emphasis: { /*鼠标悬停状态下，加深柱子颜色的同时设置一个阴影部分*/ color: '#e34509', barBorderWidth: 1, shadowBlur: 20, shadowOffsetX: 0, shadowOffsetY: 0, shadowColor: 'rgba(0,0,0,0.5)' } }; barChart.setOption(option = { title: {/*title 图形标题*/ text: '柱形图和折线图', /*标题*/ subtext: '数据为虚拟数据', /*副标题*/ x: 'center', textStyle: { color: '#000', fontSize: 24 } }, tooltip: {}, /*显示鼠标悬停，默认格式*/ legend: {/*legend 图例*/ data: ['当月值', "上年同期", "年度指标"], x: 'center', y: 'bottom' }, xAxis: {/*xAxis X轴*/ data: ["炼油一部", "炼油二部", "炼油三部", "炼油四部", "芳烃部", "油品储运部", "热电部"], axisTick: { alignWithLabel: true/*设置坐标轴刻度与标签对齐，默认不设置的状态下是不对齐的*/ }, axisLabel: { // rotate: 60 textStyle: { color: '#000' // fontSize:13 } } }, yAxis: {}, series: [/*series 系列信息*/ { name: '当月值', /*name 需要与图例保持一致*/ type: 'bar', /*type 指明图形类型，bar 柱形图*/ itemStyle: barItemStyle, data: [32, 43, 54, 65, 54, 56, 32] }, { name: '上年同期', /*name 需要与图例保持一致*/ type: 'bar', /*type 指明图形类型，bar 柱形图*/ itemStyle: barItemStyle, data: [34, 45, 23, 45, 24, 56, 62] }, { name: '年度指标', type: 'line', /*line 折线图*/ itemStyle: { normal: { color: '#ffff00'/*默认状态下*/ }, emphasis: { /*鼠标悬停状态下，加深柱子颜色的同时设置一个阴影部分*/ color: '#f0f033', barBorderWidth: 1, shadowBlur: 20, shadowOffsetX: 0, shadowOffsetY: 0, shadowColor: 'rgba(0,0,0,0.5)' } }, data: [30, 28, 20, 30, 29, 27, 19] } ] }); </script> </body> </html> 运行效果图如下，距离目标效果图就差一个颜色和风格主题：

五、给图形设计主题

在ECharts官网下载导航栏中可选择已有主题下载，也可自定义构建主题

本例下载的是已有的macarons主题，使用方法如下：

最终效果图：

转载于:https://www.cnblogs.com/yerongtao/p/6654517.html

相关资源：JAVA上百实例源码以及开源项目

最新回复(0)