图表插件使用汇总(echarts,highchairts)
1、echarts之饼图显示数字
option={ title: { text: '某站点用户访问来源', subtext: '纯属虚构', x: 'center' }, tooltip: { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { orient: 'vertical', x: 'left', data: [ '直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎' ] }, calculable: true, series: [ { name: '访问来源', type: 'pie', radius: '55%', center: [ '50%', '60%' ], itemStyle: { normal: { label: { show: true, textStyle: { fontFamily: 'MicrosoftYaHei', fontSize: '12', fontWeight: 'bold' }, formatter: '{b}: {c}亿元\n{d}%' }, labelLine: { show: true } } }, data: [ { value: 335, name: '直接访问' }, { value: 310, name: '邮件营销' }, { value: 234, name: '联盟广告' }, { value: 135, name: '视频广告' }, { value: 1548, name: '搜索引擎' } ] } ] }
主要是itemStyle:属性设置
2、绑定事件
1) 模块化引入(echarts.js)
var ecConfig = require('echarts/config');
myChart.on(ecConfig.EVENT.CLICK, function(param){
// to-do
});
2) 单一文件引入 (echarts-all.js)
myChart.on('click', function(param){ // ecConfig.EVENT.CLICK无非就是个常量而已
// to-do
});
3、地图-echarts显示地图
1.echarts官网上下载:http://echarts.baidu.com/doc/example.html
怎么在jsp里面使用:
模块化单文件引入:这是百度推荐使用的(不过这里我们用另外一种方式)。
标签式单文件引入:这个跟我们引入普通的js是一样的,下面的讲解主要是以这个方式为主。
自1.3.5开始,ECharts提供标签式引入。如果你的项目本身并不是基于模块化开发的,或者是基于CMD规范(如使用的是seajs),那么引入基于AMD模块化的echarts可能并不方便,我们建议你采用srcipt标签式引入,忘掉require。Srcipt标签引入echarts后将可以直接使用两个全局的命名空间:echarts,zrender,可参考ECharts标签式引入。
需要注意的是excanvas依赖body标签插入Canvas节点去判断Canvas的支持,如果你把引用echarts的script标签放置head内在IE8-的浏览器中会出现报错,解决的办法就是把标签移动到body内(后)。
标签式引入环境中,常用模块的引用可通过命名空间直取,同模块化下的路径结构,如: echarts.config = require('echarts/config'), zrender.tool.color = require('zrender/tool/color') //from echarts example <body> <div id="main" style="height:400px;"></div> ... <script src="example/www2/js/dist/echarts-all.js"></script> <script> var myChart = echarts.init(document.getElementById('main')); var option = { ... } myChart.setOption(option); </script> </body> 可以直接引入的单文件如下: dist/echarts-all.js : 经过压缩,全图表,包含world,china以及34个省市级地图数据 source/echarts-all.js : 未压缩,全图表,包含world,china以及34个省市级地图数据,可用于调试
下面这个例子是显示iPhone在中国的销量:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>1.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> </head> <body> <!--定义页面图表容器--> <!-- 必须制定容器的大小(height、width) --> <div id="main" style="width: 98%; height: 500px;border: 1px solid #ccc; padding: 10px;"></div> <script type="text/javascript" src="../echarts-all.js"></script> 这个就是echarts全部js,直接引入即可。 <script type="text/javascript" src="../jquery-1.8.3.min.js"></script> <script type="text/javascript"> var myChart = echarts.init(document.getElementById('main')); 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: false, 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)} ] } ] }; myChart.setOption(option); </script> </body> </html>
效果:
全国地图找子级地市:
(钻取列子http://echarts.baidu.com/echarts2/doc/example/map20.html)
<!DOCTYPE html> <html> <head> <title>2.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> </head> <body> <!--定义页面图表容器--> <!-- 必须制定容器的大小(height、width) --> <div id="main" style="width: 98%; height: 500px; border: 1px solid #ccc; padding: 10px;"></div> <script type="text/javascript" src="../jquery-1.8.3.min.js"></script> <script type="text/javascript" src="../echarts-all.js"></script> <script type="text/javascript"> var myChart = echarts.init(document.getElementById('main')); option = { tooltip : { trigger: 'item' }, toolbox: { show : true, orient: 'vertical', x:'right', y:'center', feature : { mark : {show: true}, dataView : {show: true, readOnly: false} } }, series : [ { tooltip: { trigger: 'item', formatter: '{b}' }, name: '全国', type: 'map', mapType: 'china', mapLocation: {//显示主地图的位置及其大小 x: 'left', y: 'top', width: '50%' }, roam: false,//地图不允许拖动 selectedMode : 'single', itemStyle:{ normal:{label:{show:true}}, emphasis:{label:{show:true}} }, data:[ {name: '北京', selected:false}, {name: '天津', selected:false}, {name: '上海', selected:false}, {name: '重庆', selected:false}, {name: '河北', selected:false}, {name: '河南', selected:false}, {name: '云南', selected:false}, {name: '辽宁', selected:false}, {name: '黑龙江', selected:false}, {name: '湖南', selected:false}, {name: '安徽', selected:false}, {name: '山东', selected:false}, {name: '新疆', selected:false}, {name: '江苏', selected:false}, {name: '浙江', selected:false}, {name: '江西', selected:false}, {name: '湖北', selected:false}, {name: '广西', selected:false}, {name: '甘肃', selected:false}, {name: '山西', selected:true},//默认选中 {name: '内蒙古',selected:true},//默认选中 {name: '陕西', selected:false}, {name: '吉林', selected:false}, {name: '福建', selected:false}, {name: '贵州', selected:false}, {name: '广东', selected:false}, {name: '青海', selected:false}, {name: '西藏', selected:false}, {name: '四川', selected:false}, {name: '宁夏', selected:false}, {name: '海南', selected:false}, {name: '台湾', selected:false}, {name: '香港', selected:false}, {name: '澳门', selected:false} ] } ], animation: false }; myChart.setOption(option, true); //显示国家地图 //var ecConfig = require('echarts/config'); //myChart.on(ecConfig.EVENT.MAP_SELECTED, function (param){//由于是标签式单文件引入所以这个模块化单文件引入的事件要改变,不能使用require myChart.on(echarts.config.EVENT.MAP_SELECTED, function (param){//单击省份事件 var selected = param.selected; var selectedProvince; var name; for (var i = 0, l = option.series[0].data.length; i < l; i++) { name = option.series[0].data[i].name; option.series[0].data[i].selected = selected[name]; if (selected[name]) { selectedProvince = name; } } alert(selectedProvince);//所选择省的名字 if (typeof selectedProvince == 'undefined') { option.series.splice(1); option.legend = null; option.dataRange = null; myChart.setOption(option, true);//如果选择省份不存在则显示国家 return; } option.series[1] = { name: '居民建档数', type: 'map', mapType: selectedProvince, itemStyle:{ normal:{label:{show:true}},//没选择时候省份是否显示 emphasis:{label:{show:true}}//选择之后省份是否显示 }, mapLocation: {//显示子地图的位置及其大小 x: 'right', y: 'top', width: '50%' }, roam: false,//地图不允许拖动 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: '锡林郭勒盟',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: '广安市',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: '文山壮族苗族自治州',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: '衡阳市',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: '潮州市',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: '孝感市',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: '赣州市',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: '葫芦岛市',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: '马鞍山市',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: '镇江市',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)} ] }; option.legend = { x:'right', data:['居民建档数'] }; option.dataRange = { orient: 'horizontal', x: 'right', min: 0, max: 1000, color:['orange','yellow'], text:['高','低'], // 文本,默认为数值文本 splitNumber:0 }; myChart.setOption(option, true);//显示省地图 }); //选择地级市的单击事件 myChart.on(echarts.config.EVENT.CLICK, function (param){ var seriesName=param.seriesName; if(seriesName.trim()=="居民建档数"||seriesName.trim()==""){//由于全国地图和省地图都要触发这个事 件,所以要判断是省还是地级市 alert(param.name);//地级市的名字 } }); </script> </body> </html>
效果:
4、highchart之chart.zoomType--实现指定区域放大
指定此图是沿着什么轴进行放大,例如zoomType: 'xy'沿着X轴和Y轴放大,依次类推
5、highchart之x轴分类过多,以缩略跨值显示时,plotOptions中dataLabels无法显示多值问题
正常图: 异常图:
处理代码:
plotOptions: {
line: {
dataLabels: {
enabled: true,
formatter: function() {
// 根据条件设置要显示的值
if(表达式){
return xxx;
}
},
rotation: 1 // 设置下倾斜度,多值问题解决
},
enableMouseTracking: true
}
}
6、echarts之全国省市县地图扩展
项目所迫,要求做市及区的地图,echarts官方例子...咳...咳咳...,╮(╯▽╰)╭看了良久,一脸蒙逼......
折腾良久,终于出来了能看的扩展图,不多说了,详情看代码注解。(去掉标色的区域,其实和普通图表没啥区别)
<%@ page contentType="text/html; charset=utf-8" isELIgnored="false"%> <html> <head> <title>市级地图</title> </head> <body> <div id="main" style="height: 400px;"></div> </body> <!-- 由于这是jsp所以取得项目的路径引入两个关键js即可 --> <script src="<%=path %>/js/jquery/jquery-1.8.3.min.js"></script> <script src="<%=path %>/ts/build/dist/echarts.js"> </script> <script type="text/javascript"> // 路径配置 require.config({ paths: { echarts: '<%=path %>/js/echarts/build/dist' } }); // 使用 require( [ 'echarts', 'echarts/chart/map' // 使用柱状图就加载bar模块,按需加载 ], function (ec) { // 基于准备好的dom,初始化echarts图表 var myChart = ec.init(document.getElementById('main')); // 这里名字对应的编码可以自己定义啦,只要对应正确的geoJson文件就行 var cityMap = { "汕尾市": "120100", "广州市": "440100" }; /* ***** 加载扩展的地图到echarts的
mapGeoData对象中,如此series.mapType才能取得扩展的地图
*/ var curIndx = 0; var mapType = [];
// echart 默认会加载世界地图和中国地图,这里是获取已经加载的地图数据对象 var mapGeoData = require('echarts/util/mapData/params'); console.log(mapGeoData) for (var city in cityMap) { mapType.push(city); // 自定义扩展图表类型,这里的geoJson是盗用echarts官方的数据 mapGeoData.params[city] = { getGeoJson: (function (c) { var geoJsonName = cityMap[c]; return function (callback) {
// 为什么要写这个路径,╭(╯3╰)╮没办法啊,geoJson放在这下面啊,当然放别的路径也可以 $.getJSON('<%=path %>/js/echarts/geoJson/china-main-city/' + geoJsonName + '.json', callback); } })(city) } } // ****** end ******
// 这两个玩意不要好像也没事,等有时间在深究 var ecConfig = require('echarts/config'); var zrEvent = require('zrender/tool/event'); option = { title: { text : '', }, tooltip : { trigger: 'item', formatter: '{b}' }, dataRange: { min: 0, max: 2500, x: 'left', y: 'bottom', text:['高','低'], // 文本,默认为数值文本 calculable : true, color:['#ff0000','#FFFF00'] }, series : [ { name: '', type: 'map', mapType: '广州市', selectedMode : 'single', 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()*100)}, {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()*100)}, {name: '荔湾区', value: Math.round(Math.random()*1000)}, {name: '海珠区', value: Math.round(Math.random()*1000)}, {name: '黄埔区', value: Math.round(Math.random()*100)}, {name: '番禺区', value: Math.round(Math.random()*1000)}, {name: '南沙区', value: Math.round(Math.random()*1000)} ] } ] }; // 为echarts对象加载数据 myChart.setOption(option); try{ window.addEventListener('resize', function () { myChart.resize();// 图表自适应窗口 }); }catch(e){} } ); </script> </html>
单文件引入版:
var mapGeoData = echarts.util.mapData.params; 理解透这句话,单文件引入方式基本也就理解透彻了
<%@ page contentType="text/html; charset=utf-8" isELIgnored="false"%> <% String path = request.getContextPath(); %><html> <head> <title>市级地图</title> </head> <body> <div class="container" > <div class="row"> <div id="main" style="height: 400px;"></div> </div> </div> </body> <!-- Placed at the end of the document so the pages load faster --> <script src="<%=path %>/js/jquery/jquery-1.8.3.min.js"></script> <script src="<%=path %>/js/echarts/build/dist/echarts-all.js"> </script> <script type="text/javascript"> // 单文件引入方式初始化 // 基于准备好的dom,初始化echarts图表 var myChart = echarts.init(document.getElementById('main')); var cityMap = { "汕尾市": "120100", "广州市": "440100" }; console.log(echarts); var curIndx = 0; var mapType = []; // 通过console.log(echarts),查看到地图数据对象 var mapGeoData = echarts.util.mapData.params; console.log(mapGeoData); for (var city in cityMap) { mapType.push(city); // 自定义扩展图表类型 mapGeoData.params[city] = { getGeoJson: (function (c) { var geoJsonName = cityMap[c]; return function (callback) { $.getJSON('<%=path %>/js/echarts/geoJson/china-main-city/' + geoJsonName + '.json', callback); } })(city) } } option = { title: { text : '', }, tooltip : { trigger: 'item', formatter: '{b}' }, dataRange: { min: 0, max: 2500, x: 'left', y: 'bottom', text:['高','低'], // 文本,默认为数值文本 calculable : true, color:['#ff0000','#FFFF00'] }, series : [ { name: '', type: 'map', mapType: '广州市', selectedMode : 'single', 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()*100)}, {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()*100)}, {name: '荔湾区', value: Math.round(Math.random()*1000)}, {name: '海珠区', value: Math.round(Math.random()*1000)}, {name: '黄埔区', value: Math.round(Math.random()*100)}, {name: '番禺区', value: Math.round(Math.random()*1000)}, {name: '南沙区', value: Math.round(Math.random()*1000)} ] } ] }; // 为echarts对象加载数据 myChart.setOption(option); try{ window.addEventListener('resize', function () { myChart.resize(); }); }catch(e){} </script> </html>
7、echarts之线型图没有连接线问题
好好的线图,突然没了线,是不是感觉整个人生都灰暗了,那么接下来便是改变我们人生色彩的时候啦。
data: [
{
"name": "需求导入",
"value": null
},
......
原因就是value:null导致,改成value:""就解决了
8、echarts之map边界线和区域颜色
series : [
{
name: '',
type: 'map',
mapType: '广州市',
selectedMode : 'single',
itemStyle:{
normal:{
borderColor: '#ffffff',// 边界线颜色设置
label:{show:true},
areaStyle:{color:'#00FF33'}// 区域颜色设置
},
emphasis:{label:{show:true}}
},
data:[
]
}
]
9、echarts x轴文字垂直显示
在axisLabel下添加属性:
formatter:function(val){
return val.split("").join("\n");
}
10、echarts x轴文字 点击事件
axiLabel设置可被点击:
xAxis : [ { type : 'category', splitLine : { show : false }, data : staffName, axisLabel : {clickable: true } } ],
11、echarts 绘图美化
优化部分
option = {
yAxis : [
{
type : 'value',
name : '单位(%)',
splitLine:{
show:false,
lineStyle:{type: 'dashed',width:0}
},
splitArea:{
show: true,
areaStyle:{color:['rgba(255, 255, 255, 0.5)','rgba(238, 232, 170, 0.5)']}
},
axisLabel:{
formatter: '{value}',
textStyle:{baseline: 'middle'} // y轴 name有值时,防止最大和最小值刻度间距异常
}
}
],
xAxis:[{
splitLine :{
show:true,
lineStyle:{
type: 'dashed',
width:1
}
},
... ...
}]
... ...
};
效果图:
12、highcharts 之fontWeight ie8兼容问题
如下在ie8的时候会报错(无法获取fontWeight属性):
title: {
text: '各延期时长项目数量分布',
subtext:' ',
style:{fontFamily : '微软雅黑',fontSize: 13,fontWeight: 'normal'}
}
兼容写法(fontWeight属性改写成数字):
title: { text: '各延期时长项目数量分布', subtext:' ', style:{fontFamily : '微软雅黑',fontSize: 13,fontWeight: 400} }
13、echarts设置legend项等长
legend: { formatter: ['{a|{name}}'].join('\n'), textStyle: { rich: { a: { width: 100 } } } }