echart初探
来源：互联网 发布：node.js用什么软件 编辑：程序博客网 时间：2024/05/19 12:12
<html><head><meta charset="utf-8"><title>ECharts</title><!--Step:1 Import a module loader, such as esl.js or require.js--><!--Step:1 引入一个模块加载器，如esl.js或者require.js--><script src="js/esl.js"></script></head><body> <!--Step:2 为ECharts准备一个具备大小（宽高）的Dom 在body标记中，form标记之外，添加一个div，用来做图表渲染的容器 --> <div id="main" style="height:500px;border:1px solid #ccc;padding:10px;"></div> <div id="mainMap" style="height:500px;border:1px solid #ccc;padding:10px;"></div> <script type="text/javascript"> //为模块加载器配置echarts的路径，这里主要是配置map图表的路径，其他的图表跟map的配置还不太一样，下边也会做另一种类型的图表事例。 // 这里引用的主要是echarts文件夹下的echarts-map文件，而其他类型的图表引用的都是echarts文件夹下的echarts文件。 require.config({ paths : { echarts : './js/echarts', 'echarts/chart/map' : './js/echarts-map' } }); //动态加载echarts，在回掉函数中使用，要注意保持按需加载结构定义图表路径 require( [ 'echarts', 'echarts/chart/map' ], function(ec) { var myChart = ec.init(document.getElementById('main')); //option主要是图标的一些设置，这不是这篇文章的重点，关于具体的设置可以参考官方的文档说明文档 option = { title : { text : 'iphone销量', subtext : '纯属虚构', x : 'center' }, tooltip : { trigger : 'item' }, legend : { orient : 'vertical', x : 'left', data : [ 'iphone3', 'iphone4', 'iphone5' ] }, dataRange : { min : 0, max : 2500, text : [ '高', '低' ], // 文本，默认为数值文本 calculable : true, textStyle : { color : 'orange' } }, toolbox : { show : true, orient : 'vertical', x : 'right', y : 'center', feature : { mark : true, dataView : { readOnly : false }, restore : true, saveAsImage : true } }, series : [ { name : 'iphone3', type : 'map', mapType : 'china', selectedMode : 'single', itemStyle : { normal : { label : { show : true }, color : '#ffd700' },// for legend 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 }, color : '#ff8c00' },// for legend 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 }, color : '#da70d6' },// for legend 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) } ] } ] }; //以下的这段代码主要是用来处理用户的选择，应用场景是可以做地图的交互，比如点击地图上的某一个省，获取相应的省的指标变化等。 //需要特别注意的是，如果需要点击某一省作地图的操作交互的话，还需要为series属性的每一项添加一个selectedMode属性，这里的属性值为 'single'即单选，也可多选 //事件命名统一挂载到require('echarts/config').EVENT（非模块化为echarts.config.EVENT）命名空间下，建议使用此命名空间作为事件名引用。 var ecConfig = require('echarts/config'); myChart.on(ecConfig.EVENT.MAP_SELECTED, function(param) { var selected = param.selected; var mapSeries = option.series[0]; var name; for(var p = 0, len = mapSeries.data.length; p < len; p++) { name = mapSeries.data[p].name; mapSeries.data[p].selected = selected[name]; if (selected[name]) { alert(name); //这里只是简单的做一个事例说明，弹出用户所选的省，如需做其他的扩展，可以在这里边添加相应的操作 } } }); myChart.setOption(option); }); </script></body></html>遇到的小问题：1.
require.config({
paths : {
echarts : './js/echarts',
'echarts/chart/map' : './js/echarts-map'
}
});
<script src="js/esl.js"></script> 一开始直接拷贝例子，这两个位置不一样 耽误了几分钟。。。
2. 打印选中省份时 series 里selectedMode : 'single' 忘了设 。默认值时null，无法打印，目测null时无法触发选中事件 。
0 0
- echart初探
- echart
- Echart
- echart
- EChart
- Echart
- Echart
- EChart
- EChart初始化
- echart 地图
- echart-X
- echart使用
- Echart样式
- echart配置
- ECHART新学
- echart实例
- Echart使用
- echart前端
- 初志科技面试总结
- 考试系统维护中对项目管理的一点体会
- Android -- 获得当前正在运行的activity信息
- 一些基本的类介绍
- OCFS2+ASM 的RAC安装文档
- echart初探
- 正则表达式判断合法IP
- 设备驱动(十三)
- AJAX如何调用webservice
- 如何使类的成员函数作为回调函数
- android根据uri或文件绝对路径获取文件基本信息
- 第一个stuts2的程序（自己）
- 开发一款高端大气上档次的android应用需要必备的知识——记于2013年末
- 设备驱动(十四)
