echart展示图表
来源：互联网 发布：数据出版相关论文 编辑：程序博客网 时间：2024/05/18 02:05
1.效果展示：
代码：
var myChart = echarts.init(document.getElementById('temperature_tiaox'));var option = {title : {text : '耗电量柱形图表', subtext:'纯属虚构'}, // 鼠标放在条形上，得到提示信息tooltip : {trigger : 'axis'},legend : {data : ['机器1','机器2','机器3',]},toolbox : {show : true,},xAxis : {type : 'category',data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']},yAxis : {type : 'value',name : '单位：(kWh)'},series : [ {name : '机器1',type : 'bar',data : ['80','100','60','10','80','100','90','60','100','40','10','80'],itemStyle: {normal: {color:'#0687C0'}} },{name : '机器2',type : 'bar',data : ['60','50','40','10','80','100','50','60','30','40','10','80'],itemStyle: {normal: {color:'#C23531'}} },{name : '机器3',type : 'bar',data : ['10','20','40','10','80','100','50','60','60','40','70','80'],itemStyle: {normal: {color:'#314656'}} } ]};// 为echarts对象加载数据 myChart.setOption(option);注意事项：这里案例是最基础，但是里面还是有一个知识点来的，就是在使用echarts.js的时候一定要配置xAxis,yAxis,series这三个参数，如果是不想设置的话也要初始化可以将其设置为空JSON就可以了，要不然会出项报错，同时要保证在echarts.init之前的对象是有宽高的，要不然也会出现错误2.效果图：在讲解这个案例之前，首先我们来假设一个命题，假设要统计一个超市上半年的进货金额和一周的销售金额，其中的进货金额用柱状图表示，销售金额用折线图表示，然后还要标出半年中最大值和最小值，同时还要求出销售和进货的平均数，进货金额分别是[200,312,431,241,175,275,369]，销售金额[321,432,543,376,286,298,400]代码：var myChart = echarts.init(document.getElementById('temperature_tiaox'));var option = {title : {text : '超市账单图表'}, // 鼠标放在条形上，得到提示信息tooltip : {trigger : 'axis'},legend : {data : ['进货金额','销售金额',]},toolbox : {show : true,},xAxis : {type : 'category',data : ['1月','2月','3月','4月','5月','6月','7月']},yAxis : {type : 'value',name : '万元'},series:[{ name:'进货金额', type:'bar', data:[200,312,431,241,175,275,369], markPoint: { data: [ {type: 'max', name: '最大值'}, {type: 'min', name: '最小值'} ] }, markLine:{ data:[ {type:'average',name:'平均值',itemStyle:{ normal:{ color:'green' } }} ] } },{ name:'销售金额', type:'line', data:[321,432,543,376,286,298,400], markPoint: { data: [ {type: 'max', name: '最大值'}, {type: 'min', name: '最小值'} ] }, markLine:{ data:[ {type:'average',name:'平均值',itemStyle:{ normal:{ color:'blue' } }} ] } }]};// 为echarts对象加载数据 myChart.setOption(option);3.效果展示：option = { title : { text: '某站点用户访问来源', subtext: '纯属虚构', x:'center' }, tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { orient : 'vertical', x : 'left', data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'] }, toolbox: { show : true, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, magicType : { 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:'访问来源', type:'pie', radius : '55%', center: ['50%', '60%'], data:[ {value:335, name:'直接访问'}, {value:310, name:'邮件营销'}, {value:234, name:'联盟广告'}, {value:135, name:'视频广告'}, {value:1548, name:'搜索引擎'} ] } ]};0 0
- echart展示图表
- 前端Echart图表展示
- 【数据抓取】EChart图表展示
- leaflet + echart 图表展示信息
- Echart获取mysql表实现图表展示
- echart 图表显示技术
- echart动态图表
- Android加载echart图表
- echart 图表问题
- echart图表制作bug
- echart 使用jsp展示
- 图表展示
- Echart实现从数据库获取数据展示图表（结合Servlet和SSM实现的两种实例）
- 简单的echart图表实现
- echart chart morisjs 图表重叠
- echart图表拉杆的配置
- android之基于Echart的图表
- jQuery图表插件EChart的使用
- 从数组中找出其和等于S的两个数
- Mac SVN访问Windows服务器出错
- Tomcat学习2.2（简单的Servlet容器）
- 提高myEclipse的开发效率,设置
- 压缩感知科普
- echart展示图表
- Leetcode 299. Bulls and Cows
- windows10安装Scipy
- 中国压缩传感资源（China Compressive Sensing Resources）
- Spring 常用接口说明
- 每天一个linux命令（37）：date命令
- 压缩感知（Compressive Sensing）学习之（二）
- OpenShift 自定义 OPENSHIFT_DOCUMENT_ROOT 变量，替换网站根目录路径！
- 四种比较简单的图像显著性区域特征提取方法原理及实现-----> AC/HC/LC/FT。
