常用eharts图表展示方法（内附5个常用样例）
来源：互联网 发布：电脑写小说的软件 编辑：程序博客网 时间：2024/06/04 01:21
最近项目中大量运用了图表的东西，现贴出几个demo，供大家参考，如有类似需求的童鞋，直接拿走不谢。点击进入echarts官方网址demo将下面的代码直接复制粘贴即可
1.效果图：
option = { tooltip: { trigger: 'axis', axisPointer: { type: 'cross', crossStyle: { color: '#999' } } }, legend: { x:'center', y: 'bottom', data:['百度','腾讯',"阿里","百度百分比","腾讯百分比",'阿里百分比'] }, xAxis: [ { type: 'category', data: ['05/01','05/08','05/15','05/22','05/29','06/05','06/12'], axisPointer: { type: 'none' } } ], yAxis: [ { type: 'value', name: '亿\n元', min: 0, max: 100, interval: 20, }, { type: 'value', name: '百\n分\n比', min: 0, max: 100, interval: 20, axisLabel: { formatter: '{value}%' } } ], series: [ { name:'百度', type:'bar', yAxisIndex: 0, data:[12,34,23,21,21,23,12] }, { name:'腾讯', type:'bar', yAxisIndex: 0, data:[13,23,34,21,2,45,23] }, { name:'阿里', type:'bar', yAxisIndex: 0, data:[25,57,57,42,23,68,35] }, { name:'百度百分比', type:'line', yAxisIndex: 1, data:[12,34,23,21,21,23,12] }, { name:'腾讯百分比', type:'line', yAxisIndex: 1, data:[13,23,34,21,2,45,23] }, { name:'阿里百分比', type:'line', yAxisIndex: 1, data:[25,57,57,42,23,68,35] } ] };2.效果图
var weekPoundateDataset = { "工资": [9, 8, 7, 8, 4], "绩效": [3, 4, 6, 2, 6]};var weekPoundateKey = ['2016/06/01','2016/06/03','2016/06/05','2016/06/07','2016/06/09'];var weekPoundateSum=[];var weekPoundateData1 = {};for (var x in weekPoundateDataset["工资"]) { weekPoundateSum[x] = weekPoundateDataset["工资"][x]+weekPoundateDataset["绩效"][x]; weekPoundateData1[weekPoundateKey[x]] = weekPoundateSum[x];}option = { tooltip : { trigger: 'axis', axisPointer : { // 坐标轴指示器，坐标轴触发有效 type : 'none' // 默认为直线，可选为：'line' | 'shadow' }, }, legend: { x:'center', y: 'bottom', data:['工资','绩效','总收入','工资百分比','绩效百分比'] }, grid: { right: '4%', bottom: '8%', containLabel: true }, xAxis : [ { type : 'category', data : ['2016/06/01','2016/06/03','2016/06/05','2016/06/07','2016/06/09'] } ], yAxis : [ { type : 'value', name: '万\n元', min: 0, max: 15, interval: 3, }, { type: 'value', name: '百\n分\n比', min: 0, max: 100, interval: 20, axisLabel: { formatter: '{value}%' }, } ], series : [ { name:'工资', type:'bar', barWidth : 40, stack: '收入', label: { normal: { show: true, position: 'inside', formatter: function(params) { return Math.round(params.value/weekPoundateData1[params.name]*1000)/10+"%"; }, textStyle:{color:'black'} } }, data:[9, 8,7,8,4] }, { name:'绩效', type:'bar', stack: '收入', label: { normal: { show: true, position: 'inside', formatter: function(params) { return Math.round(params.value/weekPoundateData1[params.name]*1000)/10+"%"; }, textStyle:{color:'black'} } }, data:[3, 4, 6, 2, 6] }, { name:'总收入', type:'line', yAxisIndex: 0, data:[12,12,13,10,10] }, { name:'工资百分比', type:'line', yAxisIndex:1, data:[75,66.7,53.8,80,40], }, { name:'绩效百分比', type:'line', yAxisIndex:1, data:[25,33.3,46.2,20,60] } ], color:['#4f81bc','#f79647','red','green','blue'] };3.效果图
ption = { title: { text: '万\n元' }, tooltip: { trigger: 'axis' }, legend: { x:'center', y: 'bottom', data:['网络支付','移动支付','跨境支付','金融业务','搜索引擎'] }, grid: { left: '3%', right: '4%', bottom: '20%', containLabel: true }, xAxis: { type: 'category', boundaryGap: false, data: ['2016-01-05','2016-01-06','2016-01-07','2016-01-08','2016-01-09','2016-01-10','2016-01-11','2016-01-12','2016-01-13','2016-01-14','2016-01-15','2016-01-16','2016-01-17','2016-01-18','2016-01-19'], axisLabel: { interval:0, rotate:40 } }, yAxis: { type: 'value' }, series: [ { name:'网络支付', type:'line', data:[120, 132, 101, 134, 90, 230, 210,243,212,234,245,231,233,323,211,112,115,355,221] }, { name:'移动支付', type:'line', data:[220, 182, 191, 234, 290, 330, 310,231,234,211,245,234,321,234,111,124,232,235,676] }, { name:'跨境支付', type:'line', data:[150, 232, 201, 154, 190, 330, 410,221,335,486,433,222,111,233,455,444,333,222,333] }, { name:'金融业务', type:'line', data:[320, 332, 301, 334, 390, 330, 320,231,124,353,231,132,342,233,455,423,123,123,334] } ] };4.效果图
option = { tooltip: { trigger: 'axis', axisPointer: { type: 'cross', crossStyle: { color: '#999' } } }, legend: { x:'center', y: 'bottom', data:['工行','中行',"建行","农行","招行",'总计','总计折线'] }, xAxis: [ { type: 'category', data: ['05/01','05/08','05/15','05/22','05/29','06/05','06/12'], axisPointer: { type: 'none' } } ], yAxis: [ { type: 'value', name: '万\n元', } ], series: [ { name:'工行', type:'bar', data:[12,34,23,21,21,23,12] }, { name:'中行', type:'bar', data:[13,23,34,21,2,45,23] }, { name:'建行', type:'bar', data:[25,57,57,42,23,68,35] }, { name:'农行', type:'bar', data:[12,34,23,21,21,23,12] }, { name:'招行', type:'bar', data:[13,23,34,21,2,45,23] }, { name:'总计', type:'bar', data:[225,257,257,242,223,268,235] }, { name:'总计折线', type:'line', yAxisIndex: 0, data:[225,257,257,242,223,268,235] } ] };5.效果图
option = { title : { subtext:'单位:万元', x:'right' }, tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { bottom: 'left', data: ['中国建设银行','中国工商银行','中国农业银行','招商银行','中国邮政储蓄银行','中国银行','平安银行','交通银行','中国民生银行','其他'] }, series : [ { name:'行业分布', type: 'pie', radius : '45%', center: ['50%', '40%'], data:[ {value:2324.34, name:'中国建设银行'}, {value:3434.33, name:'中国工商银行'}, {value:22332, name:'中国农业银行'}, {value:44545, name:'招商银行'}, {value:4900, name:'中国邮政储蓄银行'}, {value:55663, name:'中国银行'}, {value:34343, name:'平安银行'}, {value:58596, name:'交通银行'}, {value:2323, name:'中国民生银行'}, {value:5983, name:'其他'} ], itemStyle: { normal:{ label:{ show:true, formatter: function (params) { return params.value; } } }, emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] };阅读全文
1 0
- 常用eharts图表展示方法（内附5个常用样例）
- Eharts 常用的属性
- React 入门，5个常用DEMO展示
- React 入门，5个常用DEMO展示
- Unity3D内常用方法
- UITableViewDataSource和UITableViewDelegate内常用的13个方法
- 5个常用DOM方法
- php 常用字符串函数（附例）
- GSON简单实用及常用方法（附 .jar 地址）
- String类的常用方法(附 StringBuilder)
- 前端开发者常用的9个JavaScript图表库
- 前端开发者常用的 9 个 JavaScript 图表库
- 常用图表大全（持续更新）
- PythonStock（16）：使用bokeh 展示，股票中的16个常用指标
- android 常用图表
- 常用图表控件比较
- MSChart常用图表注解
- C# ASP.NET 最常用的通用权限的3个方法例子展示(每个功能一行代码实现)
- POj 3026 Borg Maze (bfs求权值的最小生成树)
- Educational Codeforces Round 27 G. Shortest Path Problem?
- Lua 调用其他模块
- Qt学习之路(30): Graphics View Framework
- javascript 深入学习之一
- 常用eharts图表展示方法（内附5个常用样例）
- redis增大查询速度（项目中实际应用举例）
- python学习(四)之条件+循环
- Android内存泄漏和内存调优
- JavaScript闭包
- 自定义标题栏
- 记录每次更新到本地git仓库
- QT图形框架
- JNI与C++数据类型传递示例（包括ArrayList对象、ArrayList嵌套返回）
