Echarts各种图表案例（代码+效果）
2024-06-29 03:27:55
阅读目录
- 一、编写模板
- 一、折线图
- 三、柱形图
- 四、叠加的柱形图
- 五、散点图
- 六、饼图
- 七、雷达图
- 八、中国地图
学习网站： Echarts官网
一、编写模板
从官网下载echarts.min.js文件
模板如下，以后编写echarts图表只需改变option里的内容就可以了
<html>
<head lang="en"><meta charset="utf-8"><title>ECharts</title><style type="text/css">#main{height:400px;width: 1000px}</style><script src="echarts.min.js"></script>
</head>
<body>
<div id="main"></div>
<script type="text/javascript">// 基于准备好的dom，初始化 echarts 实例并绘制图表。var myChart = echarts.init(document.getElementById("main"));// 指定图表的配置项和数据var option={};// 使用刚指定的配置项和数据显示图表myChart.setOption(option);
</script>
</body>
</html>
一、折线图
var option = {title : {text: '未来一周气温变化',subtext: '广东省气象局'},tooltip : {trigger: 'axis'// trigger 设置触发类型，默认数据触发，可选值：'item' ¦ 'axis'},legend: {// orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）orient: 'horizontal',data:['最高气温','最低气温']},xAxis : [{type : 'category',//类目轴boundaryGap : false, // boundaryGap值为false的时候，折线第一个点在y轴上data : ['周一','周二','周三','周四','周五','周六','周日']}],yAxis : [{type : 'value',//数值轴axisLabel : {formatter: '{value} °C'}}],series : [{name:'最高气温',type:'line',//图形类型symbolSize:8,// 设置折线上圆点大小symbol: 'none',// 设置小圆点消失,注意：设置symbol: 'none'以后，拐点不存在了，设置拐点上显示数值无效smooth: 0.5,// 设置折线弧度，取值：0-1之间data:[11, 11, 15, 13, 12, 13, 10],markPoint : {data : [{type : 'max', name: '最大值'},{type : 'min', name: '最小值'}]},markLine:{data:[{type:'average',name:'平均值'}]}},{name:'最低气温',type:'line',symbol:'circle',// 设置拐点为实心圆symbolSize:8,// 设置折线上圆点大小data:[1, -2, 2, 5, 3, 2, 0],markPoint : {data : [{type : 'min', name: '周最低'}]}}]};
三、柱形图
var option = {title : {text: '未来一周气温变化',subtext: '广东省气象局' },tooltip : {trigger: 'axis'},legend: {itemGap:40,data:['最高气温','最低气温']},calculable : true,xAxis : [{type : 'category',data : ['周一','周二','周三','周四','周五','周六','周日']}],yAxis : [{type : 'value',axisLabel : {formatter: '{value} °C'}}],series : [{name:'最高气温',type:'bar',data:[11, 11, 15, 13, 12, 13, 10],markPoint : {data : [{type : 'max', name: '最大值'},{type : 'min', name: '最小值'}]}},{name:'最低气温',type:'bar',data:[1, 4, 2, 5, 3, 2, 0],markPoint : {data : [{type : 'min', name: '周最低'}]}}]};
四、叠加的柱形图
只需要在前面柱形图代码的series添加 stack:‘1’（具体位置看如下代码）
series : [{stack:'1',//叠起来name:'最高气温',type:'bar',data:[11, 11, 15, 13, 12, 13, 10],markPoint : {data : [{type : 'max', name: '最大值'},{type : 'min', name: '最小值'}]}},{stack:'1',//叠起来name:'最低气温',type:'bar',data:[1, 4, 2, 5, 3, 2, 0],markPoint : {data : [{type : 'min', name: '周最低'}]}}]
五、散点图
var option ={title:{text:'男女身高体重比例',subtext:'纯属虚构'},tooltip:{trigger:'axis',axisPointer:{show:true,type:'cross',lineStyle:{type:'dashed',width:1}}},legend:{data:['男生','女生']},xAxis:{type:'value',scale:true,//是否脱离0刻度，设置成 true 后坐标刻度不会强制包含零刻axisLabel:{formatter:'{value}cm'}},yAxis:{type:'value',scale:true,axisLabel:{formatter:'{value}kg'}},series:[{name:'女生',type:'scatter',data: [[161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0], [155.8, 53.6],[170.0, 59.0], [159.1, 47.6], [166.0, 69.8], [176.2, 66.8], [160.2, 75.2],[172.5, 55.2], [170.9, 54.2], [172.9, 62.5], [153.4, 42.0], [160.0, 50.0],],markPoint:{data:[{type:'max',name:'最大值'},{type:'min',name:'最小值'}]},markLine:{data:[{type:'average',name:'平均值'}]}},{name:'男生',type:'scatter',data: [[174.0, 65.6], [175.3, 71.8], [193.5, 80.7], [186.5, 72.6], [187.2, 78.8],[181.5, 74.8], [184.0, 86.4], [184.5, 78.4], [175.0, 62.0], [184.0, 81.6],[180.0, 76.6], [177.8, 83.6], [192.0, 90.0], [176.0, 74.6], [174.0, 71.0]],markPoint:{data:[{type:'max',name:'最大值'},{type:'min',name:'最小值'}]},markLine:{data:[{type:'average',name:'平均值'}]}}]};
六、饼图
roseType:‘area’,//是否显示成南丁格尔图默认false
var option = {tooltip: {trigger: 'item',// trigger 设置触发类型，默认数据触发，可选值：'item' ¦ 'axis'formatter: "{a} <br/>{b}: {c} ({d}%)"// formatter设置提示框显示内容,// {a}指series.name,b}指series.data的name,// {c}指series.data的value {d}%指这一部分占总数的百分比.},legend: {orient: 'vertical',x: 'left',data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']},series: [{name:'访问来源',type:'pie',
// roseType:'area',//是否显示成南丁格尔图默认falseradius: ['30%', '70%'],// 设置环形饼状图， 第一个百分数设置内圈大小，第二个百分数设置外圈大小center: ['50%', '50%'], // 设置饼状图位置，第一个百分数调水平位置，第二个百分数调垂直位置data:[{value:335, name:'直接访问'},{value:310, name:'邮件营销'},{value:234, name:'联盟广告'},{value:135, name:'视频广告'},{value:1548, name:'搜索引擎'}]}]};myChart.setOption(option);
七、雷达图
var option={title:{text:'基础雷达图'},tooltip:{trigger:'axis'},legend: {data: ['预算分配', '实际开销']},polar:[{indicator:[//雷达图的指示器，用来指定雷达图中的多个变量（维度）,跟data中 value 对应{ text: '销售', max: 6500},// 指示器名称,指示器的最大值，可选，建议设置{ text: '管理', max: 16000},{ text: '信息技术', max: 30000},{ text: '客服', max: 38000},{ text: '研发', max: 52000},{ text: '市场', max: 25000}]}],calculable:true,series:[{name:'预算 vs 开销',symbol: 'none',//去掉拐点的圈center: ['50%', '50%'],// 圆中心坐标，数组的第一项是横坐标，第二项是纵坐标。[ default: ['50%', '50%'] ]radius:160,// 圆的半径，数组的第一项是内半径，第二项是外半径。itemStyle:{normal:{areaStyle:{type:'default'}}},type:'radar',data:[{value:[4300,1000,28000,35000,5000,19000], name:'预算分配'},{value:[5000,14000,28000,31000,42000,21000], name:'实际开销'}]}]};myChart.setOption(option);
八、中国地图
var option={title:{text:'各省人口统计',x: 'center'},tooltip:{trigger:'item'},dataRange:{min:0,max:10000000,x:'left',y:'bottom',color:['lightskyblue','pink'],text:['高','低'],calculable:true},series:[{name:'人口',type:'map',//地图类型mapType:'china',//获取中国的地图itemStyle: {normal: {label: {show: true}},//显示标签emphasis: {//选中或者悬浮状态label: {show: true}}},data: [{name: '北京', value: Math.round(Math.random() * 10000000)},{name: '天津', value: Math.round(Math.random() * 10000000)},{name: '河北', value: Math.round(Math.random() * 10000000)},{name: '山西', value: Math.round(Math.random() * 10000000)},{name: '内蒙古', value: Math.round(Math.random() * 10000000)},{name: '辽宁', value: Math.round(Math.random() * 10000000)},{name: '吉林', value: Math.round(Math.random() * 10000000)},{name: '黑龙江', value: Math.round(Math.random() * 10000000)},{name: '上海', value: Math.round(Math.random() * 10000000)},{name: '江苏', value: Math.round(Math.random() * 10000000)},{name: '浙江', value: Math.round(Math.random() * 10000000)},{name: '安徽', value: Math.round(Math.random() * 10000000)},{name: '福建', value: Math.round(Math.random() * 10000000)},{name: '江西', value: Math.round(Math.random() * 10000000)},{name: '山东', value: Math.round(Math.random() * 10000000)},{name: '河南', value: Math.round(Math.random() * 10000000)},{name: '湖北', value: Math.round(Math.random() * 10000000)},{name: '湖南', value: Math.round(Math.random() * 10000000)},{name: '广东', value: Math.round(Math.random() * 10000000)},{name: '广西', value: Math.round(Math.random() * 10000000)},{name: '海南', value: Math.round(Math.random() * 10000000)},{name: '重庆', value: Math.round(Math.random() * 10000000)},{name: '四川', value: Math.round(Math.random() * 10000000)},{name: '贵州', value: Math.round(Math.random() * 10000000)},{name: '云南', value: Math.round(Math.random() * 10000000)},{name: '西藏', value: Math.round(Math.random() * 10000000)},{name: '陕西', value: Math.round(Math.random() * 10000000)},{name: '甘肃', value: Math.round(Math.random() * 10000000)},{name: '青海', value: Math.round(Math.random() * 10000000)},{name: '宁夏', value: Math.round(Math.random() * 10000000)},{name: '新疆', value: Math.round(Math.random() * 10000000)},{name: '台湾', value: Math.round(Math.random() * 10000000)},{name: '香港', value: Math.round(Math.random() * 10000000)},{name: '澳门', value: Math.round(Math.random() * 10000000)}]}]};
Echarts各种图表案例（代码+效果）相关推荐
- 数据可视化-echarts入门、常见图表案例、超详细配置解析及项目案例
文章目录 数据可视化-echarts入门.常见图表案例及项目案例 一.简介 一.数据可视化简介 二.echarts简介 三.echarts特点 四.ZRender介绍 二.Echarts的基本使用 一 ...
- 【ECharts】echarts数据化图表入门级教程（附10个案例）
echarts数据化图表入门级教程(附10个案例) 01-Echarts-介绍 ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部 ...
- echarts 折线上写数值_前端ECharts数据可视化图表案例与介绍
什么是ECharts? ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Fire ...
- echarts企业地区大数据图表模板代码
echarts企业地区大数据图表模板代码 Html5 echarts.js制作通用的企业发展营销统计大数据管理图表页面模板代码. 作品介绍 1.网页作品简介方面 : html5 echarts.js制 ...
- JavaScript小案例程序保存（完整代码+效果展示）
1.案例--点击button换照片 html部分 <!DOCTYPE html> <html lang="en"> <head><meta ...
- JS实现Echarts的图表保存为图片功能
文章目录 需求分析 开发准备 实现思路 效果图 参考链接 需求分析 实际项目开发过程中经常会有图表展示功能,同时为了满足用户需要,会附带着图表导出功能,主要形式就是保存为图片.在Echarts中本身就 ...
- react native使用百度echarts显示图表
echarts是百度推出的免费开源的图表组件,功能丰富,涵盖各行业图表.公司项目做h5项目用了不少,最近公司翻新h5页面,用react-native改造,来达到增强用户体验效果的目的.项目中遇到了一些 ...
- 在jsp中使用ECharts制作图表
ECharts插件的下载地址http://echarts.baidu.com/download.html 先来看看我们要达到的效果!后面直接上代码,如下图: 下面直接贴上代码 我们这里写的都是些死的数 ...
- echarts 实现图表缩放功能 dataZoom自带属性实现
echarts 实现图表缩放功能 亲测有效,dataZoom自带属性实现 图表数据过多展示起来密密麻麻看不到细节,需要实现缩放 这确实是实现了缩放,但是需求是标尺进行缩放,我们可以添加如下属性 图表数 ...
最新文章
- PTP4L 简化版本OC模式
- typescript主键自增长
- 【BZOJ1831】[AHOI2008]逆序对（动态规划）
- HTML5儿童玩具游戏商店网站模板
- javascript之生成一个指定范围内的随机数
- Linux 常用解压缩命令
- 【mysql】知识点
- lisp怎么改成vlx_如何用CAD自带的VLisp修改Lisp文件并且生成vlx文件？？
- Java基础知识总结（一）创建和销毁对象
- 怎么做网站，网站制作步骤有哪些？
- 关于RAID磁盘阵列与阵列卡的介绍 —— 做一个懂它的男人
- 尚硅谷周阳老师 - Docker课程学习
- Windows下搭建wnmp
- 图片或者其他文件在数据库的存储方式详解
- 记录一次微信小程序+阿里云oss的配置步骤和方法
- Kubernetes 集群基于 Rook 的 Ceph 存储之块设备、文件系统、对象存储
- 1U和2U服务器的优缺点对比
- csp试题2：公共钥匙盒
- verilog中一文搞懂有限状态机（FSM)Mealy和Moore状态机（及一段式，二段式，三段式）
- STM32项目设计：基于STM32指纹密码锁