ECharts记录

最新推荐文章于 2024-08-22 14:27:51 发布
原创 最新推荐文章于 2024-08-22 14:27:51 发布 · 272 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍如何使用ECharts创建基本图表，包括配置项说明及不同图表类型的示例代码。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

ECharts简单的例子：
1、新建一个echarts.html文件，为ECharts准备一个具备大小（宽高）的Dom。
<!DOCTYPE html>
<head>
   <meta charset="utf-8">
   <title>ECharts</title>
</head>


<body>
   <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
   <div id="main" style="height:400px"></div>
</body>


2 新建<script>标签引入模块化单文件echarts.js
<!DOCTYPE html>
<head>
   <meta charset="utf-8">
   <title>ECharts</title>
</head>
<body>
   <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
   <div id="main" style="height:400px"></div>
   <!-- ECharts单文件引入 -->
   <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
</body>


3 新建<script>标签中为模块加载器配置echarts和所需图表的路径（相对路径为从当前页面链接到echarts.js）
<!DOCTYPE html>
<head>
   <meta charset="utf-8">
   <title>ECharts</title>
</head>
<body>
   <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
   <div id="main" style="height:400px"></div>
   <!-- ECharts单文件引入 -->
   <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
   <script type="text/javascript">
// 路径配置
require.config({
   paths: {
echarts: 'http://echarts.baidu.com/build/dist'
   }
});
   </script>
</body>


4 <script>标签内动态加载echarts和所需图表，回调函数中可以初始化图表并驱动图表的生成
<!DOCTYPE html>
<head>
   <meta charset="utf-8">
   <title>ECharts</title>
</head>
<body>
   <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
   <div id="main" style="height:400px"></div>
   <!-- ECharts单文件引入 -->
   <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
   <script type="text/javascript">
// 路径配置
require.config({
   paths: {
echarts: 'http://echarts.baidu.com/build/dist'
   }
});

// 使用
require(
   [
'echarts',
'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
   ],
   function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('main')); 

var option = {
   tooltip: {
show: true
   },
   legend: {
data:['销量']
   },
   xAxis : [
{
   type : 'category',
   data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
}
   ],
   yAxis : [
{
   type : 'value'
}
   ],
   series : [
{
   "name":"销量",
   "type":"bar",
   "data":[5, 20, 40, 10, 10, 20]
}
   ]
};

// 为echarts对象加载数据 
myChart.setOption(option); 
   }
);
   </script>
</body>


5 浏览器中打开echarts.html，就可看到效果


option参数说明：
tooltip表示提示
legend表示图表的说明
xAxis表示x轴
yAxis表示y轴
series表示一系列的数据设置


更详细的说明：
tooltip:
tooltip: {
show: true //显示工具提示信息。即鼠标放上去时的显示信息
}


legend:
legend: {
data:['销量'] //显示图表的说明信息
}


xAxis:
xAxis : [
   {
type : 'category', //表示x轴的类型
data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] //表示x轴的数据
   }
]


yAxis:
yAxis : [
   {
type : 'value' //表示y轴的类型。是显示值的
   }
]


series:
series : [
   {
"name":"销量", //尽量和legend的data保持一致，该name是用于工具提示信息：即鼠标放上去时的显示信息。
"type":"bar", //图表类型，bar表示柱状图
"data":[5, 20, 40, 10, 10, 20] //表示图表的数据
   }
]




接下来说明在工程中的实例讲解：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>客户统计</title>
</head>
<body>
   <div id="main" style="height:400px"></div>
   <script type="text/javascript" src="js/dist/echarts.js"></script>
   <script type="text/javascript" src="js/jquery-1.5.1.js"></script>
   <script type="text/javascript" src="js/json2.js"></script>
   <script type="text/javascript">
   
$(function(){
   // 路径配置
require.config({
   paths: {
echarts: 'js/dist'
   }
});

loadData();
});

function loadData(){
$.ajax({
   type:"POST",
   url:"customerStatistics.action",
   success:function(data){
//success start
var sipUserNum=data.sipUserNum;
var customerNum=data.customerNum;
// 使用
   require(
[
   'echarts',
   'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
],
function (ec) {
   // 基于准备好的dom，初始化echarts图表
   var myChart = ec.init(document.getElementById('main')); 
   
   var option = {
tooltip: {
   show: true
},
legend: {
   data:['数量']
},
xAxis : [
   {
type : 'category',
data : ["sip用户","客户"]
   }
],
yAxis : [
   {
type : 'value'
   }
],
series : [
   {
"name":"数量",
"type":"bar",
"data":[sipUserNum, customerNum],
"barWidth":30,//柱图宽度
"itemStyle":{"normal":{"color":'rgb(89, 195, 255)'}}
   }
]
   };
   
   // 为echarts对象加载数据 
   myChart.setOption(option); 
}
   );
   
   //success end
   }
});
   }
   </script>
   
</body>
</html>


说明(series中的barWidth和itemStyle)：
"barWidth":30,//柱图宽度
"itemStyle":{"normal":{"color":'rgb(89, 195, 255)'}} //表示柱图的颜色


！！！前提：将ECharts的js插件添加到项目中的/js/目录下


示例（非常好）：
http://echarts.baidu.com/echarts2/doc/example.html


参数说明（非常好）
http://echarts.baidu.com/echarts2/doc/doc.html#Option


以下是各种图形的Option说明：
标准折线图（http://echarts.baidu.com/echarts2/doc/example/line1.html）：
option = {
   title : { //title标题
text: '未来一周气温变化', //标题的内容
subtext: '纯属虚构' //标题的子标题的内容
   },
   tooltip : { //工具提示
trigger: 'axis' //触发显示工具提示的触发器。
   },
   legend: { //图标说明
data:['最高气温','最低气温'] //图标说明数据
   },
   toolbox: { //工具集
show : true, //是否显示
feature : { //设置显示
   mark : {show: true}, //设置可操作增加辅助线等
   dataView : {show: true, readOnly: false}, //设置显示数据
   magicType : {show: true, type: ['line', 'bar']}, //设置显示折线图和柱状图之间切换
   restore : {show: true}, //设置还原
   saveAsImage : {show: true} //设置保存为图片
}
   },
   calculable : true, //设置是否可操作，改变值
   xAxis : [ //x轴
{
   type : 'category', //x轴的类型
   boundaryGap : false, //是否在开头和结尾有空白
   data : ['周一','周二','周三','周四','周五','周六','周日'] //x轴的数据
}
   ],
   yAxis : [ //y轴
{
   type : 'value', //y轴的数据类型
   axisLabel : { //y轴的显示的文本
formatter: '{value} °C' //格式化显示的文本
   }
}
   ],
   series : [ //一系列数据项配置
{
   name:'最高气温', //工具条提示时的name
   type:'line', //图标的类型
   data:[11, 11, 15, 13, 12, 13, 10], //图标的值
   markPoint : { //增加标注点的配置
data : [ //增加标注点的数据
   {type : 'max', name: '最大值'}, //最大值
   {type : 'min', name: '最小值'} //最小值
]
   },
   markLine : { //增加标注线的配置
data : [ //增加标注线的数据
   {type : 'average', name: '平均值'} //平均值
]
   }
},
{
   name:'最低气温', //工具条提示时的name
   type:'line', //图标的类型
   data:[1, -2, 2, 5, 3, 2, 0], //图标的值
   markPoint : { //增加标注点的配置
data : [ //增加标注点的数据
   {name : '周最低', value : -2, xAxis: 1, yAxis: -1.5} //自定义标注点
]
   },
   markLine : { //增加标注线的配置
data : [ //增加标注线的数据
   {type : 'average', name : '平均值'} //平均值
]
   }
}
   ]
};
                    
面积折线图（http://echarts.baidu.com/echarts2/doc/example/line3.html）：
option = {
   title : { //title标题
text: '某楼盘销售情况', //标题的内容
subtext: '纯属虚构' //标题的子标题的内容
   },
   tooltip : { //工具提示
trigger: 'axis' //触发显示工具提示的触发器。
   },
   legend: { //图标说明
data:['意向','预购','成交'] //图标说明数据
   },
   toolbox: { //工具集
show : true, //是否显示
feature : { //设置显示
   mark : {show: true}, //设置可操作增加辅助线等
   dataView : {show: true, readOnly: false}, //设置显示数据
   magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']}, //设置显示line、bar、stack、tiled之间切换
   restore : {show: true}, //设置还原
   saveAsImage : {show: true} //设置保存为图片
}
   },
   calculable : true, //设置是否可操作，改变值
   xAxis : [ //x轴
{
   type : 'category', //x轴的类型
   boundaryGap : false, //是否在开头和结尾有空白
   data : ['周一','周二','周三','周四','周五','周六','周日'] //x轴的数据
}
   ],
   yAxis : [ //y轴
{
   type : 'value' //y轴的数据类型
}
   ],
   series : [ //一系列数据项配置
{
   name:'成交', //工具条提示时的name
   type:'line', //图标的类型
   smooth:true, //平滑的曲线
   itemStyle: {normal: {areaStyle: {type: 'default'}}}, //区域填充，不再是一条线，而是一套闲和轴之间的区域填充
   data:[10, 12, 21, 54, 260, 830, 710] //图标的值
},
{
   name:'预购', //工具条提示时的name
   type:'line', //图标的类型
   smooth:true, //平滑的曲线
   itemStyle: {normal: {areaStyle: {type: 'default'}}}, //区域填充，不再是一条线，而是一套闲和轴之间的区域填充
   data:[30, 182, 434, 791, 390, 30, 10] //图标的值
},
{
   name:'意向', //工具条提示时的name
   type:'line', //图标的类型
   smooth:true, //平滑的曲线
   itemStyle: {normal: {areaStyle: {type: 'default'}}}, //区域填充，不再是一条线，而是一套闲和轴之间的区域填充
   data:[1320, 1132, 601, 234, 120, 90, 20] //图标的值
}
   ]
};
            
柱状图（http://echarts.baidu.com/echarts2/doc/example/bar1.html）：
option = {
   title : { //title标题
text: '某地区蒸发量和降水量', //标题的内容
subtext: '纯属虚构' //标题的子标题的内容
   },
   tooltip : { //工具提示
trigger: 'axis' //触发显示工具提示的触发器。
   },
   legend: { //图标说明
data:['蒸发量','降水量'] //图标说明数据
   },
   toolbox: { //工具集
show : true, //是否显示
feature : { //设置显示
   mark : {show: true}, //设置可操作增加辅助线等
   dataView : {show: true, readOnly: false}, //设置显示数据
   magicType : {show: true, type: ['line', 'bar']}, //设置显示折线图和柱状图之间切换
   restore : {show: true}, //设置还原
   saveAsImage : {show: true} //设置保存为图片
}
   },
   calculable : true, //设置是否可操作，改变值
   xAxis : [ //x轴
{
   type : 'category', //x轴的类型
   data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'] //x轴的数据
}
   ],
   yAxis : [ //y轴
{
   type : 'value' //y轴的数据类型
}
   ],
   series : [ //一系列数据项配置
{
   name:'蒸发量', //工具条提示时的name
   type:'bar', //图标的类型
   data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3], //图标的值
   markPoint : { //增加标注点的配置
data : [ //增加标注点的数据
   {type : 'max', name: '最大值'}, //最大值
   {type : 'min', name: '最小值'} //最小值
]
   },
   markLine : { //增加标注线的配置
data : [ //增加标注线的数据
   {type : 'average', name: '平均值'} //平均值
]
   }
},
{
   name:'降水量', //工具条提示时的name
   type:'bar', //图标的类型
   data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3], //图标的值
   markPoint : { //增加标注点的配置
data : [ //增加标注点的数据
   {name : '年最高', value : 182.2, xAxis: 7, yAxis: 183, symbolSize:18}, //自定义标注点
   {name : '年最低', value : 2.3, xAxis: 11, yAxis: 3} //自定义标注点
]
   },
   markLine : { //增加标注线的配置
data : [ //增加标注线的数据
   {type : 'average', name : '平均值'} //平均值
]
   }
}
   ]
};


标准饼图（http://echarts.baidu.com/echarts2/doc/example/pie1.html）：
option = {
   title : { //title标题
text: '某站点用户访问来源', //标题的内容
subtext: '纯属虚构', //标题的子标题的内容
x:'center' //位置居中
   },
   tooltip : { //工具提示
trigger: 'item', //触发显示工具提示的触发器。
formatter: "{a} <br/>{b} : {c} ({d}%)" //格式化工具提示信息。a：图标说明，b：名称，c：值，d:百分比
   },
   legend: { //图标说明
orient : 'vertical', //位置：垂直
x : 'left', //左对齐
data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'] //图标说明数据
   },
   toolbox: { //工具集
show : true, //是否显示
feature : { //设置显示
   mark : {show: true}, //设置可操作增加辅助线等
   dataView : {show: true, readOnly: false}, //设置显示数据
   magicType : { //设置显示pie和funnel之间切换
show: true, 
type: ['pie', 'funnel'],
option: {
   funnel: {
x: '25%',
width: '50%',
funnelAlign: 'left',
max: 1548
   }
}
   },
   restore : {show: true}, //设置还原
   saveAsImage : {show: true} //设置保存为图片
}
   },
   calculable : true, //设置是否可操作，改变值
   series : [ //一系列数据项配置
{
   name:'访问来源', //工具条提示时的name
   type:'pie', //图标的类型
   radius : '55%', //饼状图的半径大小
   center: ['50%', '60%'], //饼状图的圆心坐标位置：宽度,高度
   data:[ //图标的值
{value:335, name:'直接访问'}, //数据
{value:310, name:'邮件营销'}, //数据
{value:234, name:'联盟广告'}, //数据
{value:135, name:'视频广告'}, //数据
{value:1548, name:'搜索引擎'} //数据
   ]
}
   ]
};
                    


示例（非常好）：
http://echarts.baidu.com/echarts2/doc/example.html


参数说明（非常好）
http://echarts.baidu.com/echarts2/doc/doc.html#Option













xclsky1120
关注
Vue 实现健康饮食与运动记录系统：从零开始构建】 【ECharts 数据可视化：Vue 实现每日卡路里管理系统】 【Vue & ECharts 完整教程：轻松实现卡路里记录与追踪系统】 【新手友好！
南北极之间
11-04 553
Vue 实现健康饮食与运动记录系统：从零开始构建】 【ECharts 数据可视化：Vue 实现每日卡路里管理系统】 【Vue & ECharts 完整教程：轻松实现卡路里记录与追踪系统】 【新手友好！
echarts整理
weixin_37623470的博客
03-19 314
<!DOCTYPE html> <html style="height: 100%"> <head> <meta charset="utf-8"> </head> <body style="height: 100%;"> <div id="riskLevelChart"...
ECharts x坐标轴(xAxis)使用详解
热门推荐
旭东怪的博客
07-18 3万+
xAxis 说明：直角坐标系 grid 中的 x 轴，一般情况下单个 grid 组件最多只能放上下两个 x 轴，多于两个 x 轴需要通过配置offset属性防止同个位置多个 x 轴的重叠。 1 xAxis.show 说明：是否显示 x 轴。 默认值：true。 参数类型：boolean。 可选值： （1）true，显示x轴。 （2）false，隐藏x轴。 1.2 xAxis.data 说明：设置 x 轴上的值。 默认值：[]。 参数类型：Array...
01ECharts快速上手
Dove_1234的博客
09-28 274
第一步：引入echart.js <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- 引入 ECharts 文件 --> <script src="echarts.min.js"></script> </head> </html> 第二步：准备容器 <body> <!-- 为 EChart
ECharts入门学习记录
Strivedd的博客
05-16 851
在实验过程中需要实现数据可视化，故学习ECharts作此记录。 ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。 ECharts 遵循 Apache-2.0 开源协议，免费商用。 ECharts 兼容当前绝大部分浏览器。 第一个ECharts实例 在绘图前需要为ECharts准备一个定义了高宽的DOM容器，然后就可以通过echarts.init方法初始化一个echarts实例并通过setOption方法生成一个简单的柱状图。 <!DOCT
Echarts使用
weixin_43709908的博客
12-07 549
1.在绘制图表之前，我们需要为Echarts准备一个具备宽高的DOM容器 <!-- 2. 为ECharts准备一个具备大小（宽高）的Dom --> <div id="main" style="width: 750px;height:400px;"></div> 2.我们在官网eacharts 下载echarts的文件 3.我们在我们的...
【前端图表框架echarts】echarts小案例实现
阳阳的博客
07-14 7137
ECharts，是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表. 例如,现在需要比较2个同学的各学期绩点信息,使用echarts即可生成以2个同学每个学期的绩点...
echarts记录
最新发布
Mozifei73的博客
08-22 442
【代码】echarts记录。
echarts 记录网站下载数
04-03
**ECharts - 记录网站下载数** ECharts 是一个由百度开源的、基于 JavaScript 的数据可视化库，它提供丰富的图表类型，适用于网页数据展示。本项目旨在通过 ECharts 实现对软件下载量的记录，并以曲线图的形式展示...
echarts日历 记录信息
09-15
该文章配套资源 ...
echarts-doc
01-26
12. **版本更新历史**：文档通常会包含版本更新记录，可以帮助开发者了解新版本引入的新特性或修复的问题。 通过深入阅读和实践"echarts-doc-master"中的内容，开发者不仅能掌握ECharts的基本用法，还能深入理解其...
Echarts --------使用步骤
sweetgirl520的博客
05-31 1936
方式1：模块化单文件引入 1、新建一个echarts.html文件，为ECharts准备一个具备大小（宽高）的Dom。 2、新建标签引入模块化单文件echarts.js 3、新建标签中为模块加载器配置echarts和所需图表的路径（相对路径为从当前页面链接到echarts.js），引入图表文件见引入ECharts2 4、标签内动态加载echarts和所需图表，回调函数中可以初始化图表并
ECharts 使用手册 三步走
汪学友的博客
07-17 325
1.引入ECharts <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- 引入 ECharts 文件 --> <script src="echarts.min.js"></script> </head> </html> 2.准备一个DOM容器 <body> <!-- 为 ECh
Echart颜色设置
zhanlandemeng的博客
04-27 2万+
最近在做的项目用到Echarts，由于客户对图表颜色的要求，找了很多资料，终于对柱状图，饼图，仪表盘图的颜色设置有了一个了解，供大家参考学习。 Echarts配置项手册：http://echarts.baidu.com/option.html#title Echarts实例：http://echarts.baidu.com/demo.html#confidence-band 1. 饼状图
【Vue + Echarts】DOM大小改变后重绘图表（resize）
等时钟成长
07-02 9265
Vue中使用Echarts绘图，DOM改变后重绘 1. 我的项目背景 首先，我使用Vue+Element-UI搭建的系统框架，左侧菜单栏和标题，右侧上方横条上有一个按钮，点击可以实现菜单栏的折叠与展开。 2. Echarts图表不能重绘 一开始的思路，是监听DOM变化，于是在网上搜索了一些方法，但是由于本系统并不会大量地改变DOM，没有必要监听DOM宽高的变化。系统中只有折叠和展开两个状态，所以...
Echarts动态设置宽高resize()的使用及注意点
qq_42447856的博客
10-24 1万+
Echarts动态设置宽高resize() 今天在项目中遇到了Echarts宽高自适应问题，几经波折终于把问题解决了，下面直接上代码： // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById("main")); // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); // window.onresize = function () {.
ECharts使用总结
SharonXuran
01-21 9301
一、步骤 1.下载ECharts 有精简版、完整版等等，可以在ECharts官网上下载，下载为：echarts.min.js或echarts.js等等。 2.在html文件中调用 创建一个html文件： 在head>head>标签中加入script src="你的js的路径/echarts.min.js">script
Echarts准备
qq_42678086的博客
06-12 272
目录Echarts语法基础配置环境 Echarts ECharts是一个Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器，底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达 图）、和弦图、力导向布局图、地图、仪表盘、漏斗
Vue脚手架之Echarts的使用（简单案例）
z1696637434的博客
01-20 1314
扇形图为例和折线图为例 1.为ECharts准备一个具备大小（宽高）的Dom <template> <div> <!-- 主体区域 --> <el-main> <el-row :gutter="10" style="padding: 5px 0"> <el-col :span="8"> <el-card> <!-- 为EC
基于ECharts与百度地图的经纬度位置模拟记录
ECharts，也称为Apache ECharts，是一种使用JavaScript实现的开源可视化库。它提供了一种简单而强大的方式，可以让开发者在网页中创建交互式和动态的数据可视化图表。ECharts支持多种类型的图表，如折线图、柱状图、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值