echarts 百度开源图标工具demo
来源:互联网 发布:java 网络编程源码 编辑:程序博客网 时间:2024/06/06 18:15
最近翻起前段时间粗略学习过的echarts,竟然不会了,赶紧温习一下顺便发个博客记录下来。这个demo类似与echarts官网给出的demo,但本人觉得官网给出的demo 并不是很好,只适合初学者看一下运行机制,当涉及到其他类型的图表时,需要修改的地方demo中并没有做详细的说明,导致我在一开始使用的时候摸不着头脑。下面提供一种简单粗暴的方式来使用echarts,本代码,可以实现当前版本echarts的所有图表绘制,而且不需要相关网的demo进行修改路径等配置。但在进行大量数据的绘制时候 我觉得速度肯定是不会比官网的单个例子快的。话不多说直接上代码,附上我的echarts-all.js
<!DOCTYPE html><head> <meta charset="utf-8"> <title>ECharts</title></head><body> <!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="main" style="height:400px"></div> <!--一次性加载所有echarts的表单类型 无需单个配置路径和js--> <script src="js/echarts-all.js"></script> <script type="text/javascript"> // var myChart = ec.init(document.getElementById('main')); var myChart = echarts.init(document.getElementById('main')); <!--option到官网上取即可--> var option = { title : { text: 'iphone销量', subtext: '纯属虚构', x:'center' }, tooltip : { trigger: 'item' }, legend: { orient: 'vertical', x:'left', data:['iphone3','iphone4','iphone5'] }, dataRange: { min: 0, max: 2500, x: 'left', y: 'bottom', text:['高','低'], // 文本,默认为数值文本 calculable : true }, toolbox: { show: true, orient : 'vertical', x: 'right', y: 'center', feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, restore : {show: true}, saveAsImage : {show: true} } }, roamController: { show: true, x: 'right', mapTypeControl: { 'china': true } }, series : [ { name: 'iphone3', type: 'map', mapType: 'china', roam: true, itemStyle:{ normal:{label:{show:true}}, emphasis:{label:{show:true}} }, data:[ {name: '北京',value: Math.round(Math.random()*1000)}, {name: '天津',value: Math.round(Math.random()*1000)}, {name: '上海',value: Math.round(Math.random()*1000)}, {name: '重庆',value: Math.round(Math.random()*1000)}, {name: '河北',value: Math.round(Math.random()*1000)}, {name: '河南',value: Math.round(Math.random()*1000)}, {name: '云南',value: Math.round(Math.random()*1000)}, {name: '辽宁',value: Math.round(Math.random()*1000)}, {name: '黑龙江',value: Math.round(Math.random()*1000)}, {name: '湖南',value: Math.round(Math.random()*1000)}, {name: '安徽',value: Math.round(Math.random()*1000)}, {name: '山东',value: Math.round(Math.random()*1000)}, {name: '新疆',value: Math.round(Math.random()*1000)}, {name: '江苏',value: Math.round(Math.random()*1000)}, {name: '浙江',value: Math.round(Math.random()*1000)}, {name: '江西',value: Math.round(Math.random()*1000)}, {name: '湖北',value: Math.round(Math.random()*1000)}, {name: '广西',value: Math.round(Math.random()*1000)}, {name: '甘肃',value: Math.round(Math.random()*1000)}, {name: '山西',value: Math.round(Math.random()*1000)}, {name: '内蒙古',value: Math.round(Math.random()*1000)}, {name: '陕西',value: Math.round(Math.random()*1000)}, {name: '吉林',value: Math.round(Math.random()*1000)}, {name: '福建',value: Math.round(Math.random()*1000)}, {name: '贵州',value: Math.round(Math.random()*1000)}, {name: '广东',value: Math.round(Math.random()*1000)}, {name: '青海',value: Math.round(Math.random()*1000)}, {name: '西藏',value: Math.round(Math.random()*1000)}, {name: '四川',value: Math.round(Math.random()*1000)}, {name: '宁夏',value: Math.round(Math.random()*1000)}, {name: '海南',value: Math.round(Math.random()*1000)}, {name: '台湾',value: Math.round(Math.random()*1000)}, {name: '香港',value: Math.round(Math.random()*1000)}, {name: '澳门',value: Math.round(Math.random()*1000)} ] }, { name: 'iphone4', type: 'map', mapType: 'china', itemStyle:{ normal:{label:{show:true}}, emphasis:{label:{show:true}} }, data:[ {name: '北京',value: Math.round(Math.random()*1000)}, {name: '天津',value: Math.round(Math.random()*1000)}, {name: '上海',value: Math.round(Math.random()*1000)}, {name: '重庆',value: Math.round(Math.random()*1000)}, {name: '河北',value: Math.round(Math.random()*1000)}, {name: '安徽',value: Math.round(Math.random()*1000)}, {name: '新疆',value: Math.round(Math.random()*1000)}, {name: '浙江',value: Math.round(Math.random()*1000)}, {name: '江西',value: Math.round(Math.random()*1000)}, {name: '山西',value: Math.round(Math.random()*1000)}, {name: '内蒙古',value: Math.round(Math.random()*1000)}, {name: '吉林',value: Math.round(Math.random()*1000)}, {name: '福建',value: Math.round(Math.random()*1000)}, {name: '广东',value: Math.round(Math.random()*1000)}, {name: '西藏',value: Math.round(Math.random()*1000)}, {name: '四川',value: Math.round(Math.random()*1000)}, {name: '宁夏',value: Math.round(Math.random()*1000)}, {name: '香港',value: Math.round(Math.random()*1000)}, {name: '澳门',value: Math.round(Math.random()*1000)} ] }, { name: 'iphone5', type: 'map', mapType: 'china', itemStyle:{ normal:{label:{show:true}}, emphasis:{label:{show:true}} }, data:[ {name: '北京',value: Math.round(Math.random()*1000)}, {name: '天津',value: Math.round(Math.random()*1000)}, {name: '上海',value: Math.round(Math.random()*1000)}, {name: '广东',value: Math.round(Math.random()*1000)}, {name: '台湾',value: Math.round(Math.random()*1000)}, {name: '香港',value: Math.round(Math.random()*1000)}, {name: '澳门',value: Math.round(Math.random()*1000)} ] } ]}; // 为echarts对象加载数据 myChart.setOption(option); </script></body>
1 0
- echarts 百度开源图标工具demo
- web图表库百度开源:ECharts
- ECharts demo
- 百度开源的数据可视化工具eCharts真心不错
- 百度--ECharts
- 百度echarts使用教程(3):散点图demo(全国空气质量为例)
- 完整版ajax+百度echarts实现统计图表demo并随着窗口大小改变而自适应
- echarts HelloWord Demo
- echarts图表demo
- ECharts简单Demo
- echarts柱状图实现demo
- echarts 饼图demo
- CSDN开源夏令营 百度数据可视化实践 ECharts(1)
- CSDN开源夏令营 百度数据可视化实践 ECharts(2)
- CSDN开源夏令营 百度数据可视化实践 ECharts(3)
- CSDN开源夏令营 百度数据可视化实践 ECharts(4)
- CSDN开源夏令营 百度数据可视化实践 ECharts(5)
- CSDN开源夏令营 百度数据可视化实践 ECharts(6) 期中总结
- [poj3264] Balanced Lineup(st表)
- UVa 796 Critical Links(无向图求割边)
- android ViewHolder模式超简洁写法
- u-boot移植之mmc,网卡配置
- ultraedit 激活办法
- echarts 百度开源图标工具demo
- 请慎用java的File#renameTo(File)方法
- 安卓开发——自定义ViewGroup
- 关于创建spring源码环境时遇到的缺少spring-cglib-repack-3.2.0.jar和spring-objenesis-repack-2.2.jar两个包的问题
- android dip、px(像素)互转
- ORA-01031: insufficient privileges
- Android5.0 style样式新特性
- 随想--开启新的模式
- Hdu 1671 Phone List 字典树+变形