echarts的学习
2024-04-25 03:39:59
博客1.：https://zrysmt.github.io/
博客2:http://blog.csdn.net/future_todo/article/details/60956942
工作中一个需求echarts2升级到echarts3
1.https://www.zhihu.com/question/41001947
echart3还有有点不兼容2的地方，不太多。改进不说了，2.x代码不能用的地方，我碰到有这几个：拖动重算没有了，geo标签定位修正没有了，百度地图的调用方法彻底换了。
还有几个想不起来的，应该都是小问题，以后想到再来补充。
2.http://superzdev.com/2016/01/26/echarts-please-readme/
3. echarts2中如果echarts-all.js 这个如果引入的话，不不需要通过网络去请求其他的包了
<!-- ECharts单文件引入 --><script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>4.零点echarts的代码保留
var data = [{name: '安徽', value: [20100,'+13%','21%',20000,'+13%','21%']},{name: '北京', value: [20200,'+13%','21%',20000,'+13%','21%']},{name: '重庆', value: [20300,'+13%','21%',20000,'+13%','21%']},{name: '福建', value: [20400,'+13%','21%',20000,'+13%','21%']},{name: '甘肃', value: [20500,'+13%','21%',20000,'+13%','21%']},{name: '广东', value: [20600,'+13%','21%',20000,'+13%','21%']},{name: '广西', value: [20700,'+13%','21%',20000,'+13%','21%']},{name: '贵州', value: [20800,'+13%','21%',20000,'+13%','21%']},{name: '海南', value: [20000,'+13%','21%',20000,'+13%','21%']},{name: '河北', value: [20000,'+13%','21%',20000,'+13%','21%']},{name: '河南', value: [20000,'+13%','21%',20000,'+13%','21%']},{name: '黑龙江', value: [20000,'+13%','21%',20000,'+13%','21%']},{name: '湖北', value: [20000,'+13%','21%',20000,'+13%','21%']},{name: '湖南', value: [20000,'+13%','21%',20000,'+13%','21%']},{name: '吉林', value: [20000,'+13%','21%',20000,'+13%','21%']},{name: '江苏', value: [20000,'+13%','21%',20000,'+13%','21%']},{name: '江西', value: [20000,'+13%','21%',20000,'+13%','21%']},{name: '辽宁', value: [20000,'+13%','21%',20000,'+13%','21%']},{name: '内蒙古', value: [20000,'+13%','21%',20000,'+13%','21%']},{name: '宁夏', value: [20000,'+13%','21%',20000,'+13%','21%']},{name: '青海', value: [20000,'+13%','21%',20000,'+13%','21%']},{name: '山东', value: [20000,'+13%','21%',20000,'+13%','21%']},{name: '山西', value: [20000,'+13%','21%',20000,'+13%','21%']},{name: '陕西', value: [20000,'+13%','21%',20000,'+13%','21%']},{name: '上海', value: [20000,'+13%','21%',20000,'+13%','21%']},{name: '四川', value: [20000,'+13%','21%',20000,'+13%','21%']},{name: '天津', value: [20000,'+13%','21%',20000,'+13%','21%']},{name: '西藏', value: [20000,'+13%','21%',20000,'+13%','21%']},{name: '新疆', value: [20000,'+13%','21%',20000,'+13%','21%']},{name: '云南', value: [20000,'+13%','21%',20000,'+13%','21%']},{name: '浙江', value: [20000,'+13%','21%',20000,'+13%','21%']},{name: '香港', value: [20000,'+13%','21%',20000,'+13%','21%']},{name: '澳门', value: [20000,'+13%','21%',20000,'+13%','21%']},{name: '台湾', value: [20000,'+13%','21%',20000,'+13%','21%']}
];var geoCoordMap = {'安徽':[117.17,31.52],'北京':[116.24,39.55],'重庆':[106.54,29.59],'福建':[119.30,26.08],'甘肃':[103.51,36.04],'广东':[113.14,23.08],'广西':[108.19,22.48],'贵州':[106.42,26.35],'海南':[110.20,20.02],'河北':[114.30,38.02],'河南':[113.40,34.46],'黑龙江':[126.36,45.44],'湖北':[114.17,30.35],'湖南':[112.59,28.12],'吉林':[125.19,43.54],'江苏':[118.46,32.03],'江西':[115.55,28.40],'辽宁':[123.25,41.48],'内蒙古':[111.41,40.48],'宁夏':[106.16,38.27],'青海':[101.483,6.38],'山东':[117.00,36.40],'山西':[112.33,37.54],'陕西':[108.57,34.17],'上海':[121.29,31.14],'四川':[104.04,30.40],'天津':[117.12,39.02],'西藏':[91.08,29.39],'新疆':[87.36,43.45],'云南':[102.42,25.04],'浙江':[120.103,0.16],'香港':[115.12,21.23],'澳门':[115.07,21.33],'台湾':[121.30,25.03]
}var convertData = function (data) {var res = [];for (var i = 0; i < data.length; i++) {var geoCoord = geoCoordMap[data[i].name];if (geoCoord) {res.push({name: data[i].name,value: geoCoord.concat(data[i].value)});}}return res;
};option = {backgroundColor: '#404a59',title: {text: '全国主要城市空气质量',subtext: 'data from PM25.in',sublink: 'http://www.pm25.in',left: 'center',textStyle: {color: '#fff'}},tooltip : {trigger: 'item',formatter:function (params, ticket, callback) {console.log(params)return params.data.name+'<br/>当月<br/>销量：'+params.data.value[2]+'<br/>同比：'+params.data.value[3]+'<br/>市场份额：'+params.data.value[4]+'<br/><br/>累计<br/>'+'销量：'+params.data.value[5]+'<br/>同比：'+params.data.value[6]+'<br/>市场份额：'+params.data.value[7]}},legend: {orient: 'vertical',y: 'bottom',x:'right',data:['pm2.5'],textStyle: {color: '#fff'}},geo: {map: 'china',label: {emphasis: {show: false}},roam: true,itemStyle: {normal: {areaColor: '#323c48',borderColor: '#111'},emphasis: {areaColor: '#2a333d'}}},series : [{name: 'pm2.5',type: 'scatter',coordinateSystem: 'geo',data: convertData(data),symbolSize: function (val) {return val[2] / 1000;},label: {normal: {formatter: '{b}',position: 'right',show: false},emphasis: {show: true}},itemStyle: {normal: {color: '#ddb926'}}},{name: 'Top 5',type: 'effectScatter',coordinateSystem: 'geo',data: convertData(data.sort(function (a, b) {return b.value - a.value;}).slice(0, 6)),symbolSize: function (val) {return val[2] / 1000;},showEffectOn: 'render',rippleEffect: {brushType: 'stroke'},hoverAnimation: true,label: {normal: {formatter: '{b}',position: 'right',show: true}},itemStyle: {normal: {color: '#f4e925',shadowBlur: 10,shadowColor: '#333'}},zlevel: 1}]
};
5.怎么设置label 的显示内容。
formatter:function (params, ticket, callback) {console.log(params)return params.data.name+'<br/>当月<br/>销量：'+params.data.value[2]+'<br/>同比：'+params.data.value[3]+'<br/>市场份额：'+params.data.value[4]+'<br/><br/>累计<br/>'+'销量：'+params.data.value[5]+'<br/>同比：'+params.data.value[6]+'<br/>市场份额：'+params.data.value[7]}
6. http://gallery.echartsjs.com/editor.html?c=xSyxuDklzHl
7.
var data = [{name: '太原市', value: [20100,'+13%','21%',20000,'+13%','21%']},{name: '大同市', value: [20200,'+13%','21%',20000,'+13%','21%']},{name: '阳泉市', value: [20300,'+13%','21%',20000,'+13%','21%']},{name: '长治市', value: [20400,'+13%','21%',20000,'+13%','21%']},{name: '晋城市', value: [20500,'+13%','21%',20000,'+13%','21%']},{name: '晋中市', value: [20600,'+13%','21%',20000,'+13%','21%']},{name: '运城市', value: [20700,'+13%','21%',20000,'+13%','21%']},{name: '忻州市', value: [20800,'+13%','21%',20000,'+13%','21%']},{name: '临汾市', value: [20900,'+13%','21%',20000,'+13%','21%']},{name: '吕梁市', value: [21000,'+13%','21%',20000,'+13%','21%']}
]
var geoCoordMap = {'太原市':[112.55,37.87],'大同市':[113.30,40.08],'阳泉市':[113.57,37.85],'长治市':[113.12,36.20],'晋城市':[112.83,35.50],'晋中市':[112.75,37.68],'运城市':[110.98,35.02],'忻州市':[112.73,38.42],'临汾市':[111.52,36.08],'吕梁市':[111.13,37.52]
}var convertData = function (data) {var res = [];for (var i = 0; i < data.length; i++) {var geoCoord = geoCoordMap[data[i].name];if (geoCoord) {res.push({name: data[i].name,value: geoCoord.concat(data[i].value)});}}return res;
};app.title = '34 省切换查看';var provinces = ['shanghai', 'hebei','shanxi','neimenggu','liaoning','jilin','heilongjiang','jiangsu','zhejiang','anhui','fujian','jiangxi','shandong','henan','hubei','hunan','guangdong','guangxi','hainan','sichuan','guizhou','yunnan','xizang','shanxi1','gansu','qinghai','ningxia','xinjiang', 'beijing', 'tianjin', 'chongqing', 'xianggang', 'aomen'];
var provincesText = ['上海', '河北', '山西', '内蒙古', '辽宁', '吉林','黑龙江', '江苏', '浙江', '安徽', '福建', '江西', '山东','河南', '湖北', '湖南', '广东', '广西', '海南', '四川', '贵州', '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆', '北京', '天津', '重庆', '香港', '澳门'];function showProvince() {var name = provinces[currentIdx];// myChart.showLoading();$.get('vendors/echarts/map/json/province/' + name + '.json', function (geoJson) {// myChart.hideLoading();echarts.registerMap(name, geoJson);myChart.setOption(option = {backgroundColor: '#404a59',title: {text: provincesText[currentIdx],left: 'center',textStyle: {color: '#fff'}},series: [{type: 'map',mapType: name,label: {emphasis: {textStyle: {color: '#fff'}}},itemStyle: {normal: {borderColor: '#389BB7',areaColor: '#fff',},emphasis: {areaColor: '#389BB7',borderWidth: 0}},animation: false// animationDurationUpdate: 1000,// animationEasingUpdate: 'quinticInOut'}]});});
}
var currentIdx = 0;
option = {backgroundColor: '#404a59',title: {text: '全国主要城市空气质量',subtext: 'data from PM25.in',sublink: 'http://www.pm25.in',left: 'center',textStyle: {color: '#fff'}},tooltip : {trigger: 'item',formatter:function (params, ticket, callback) {console.log(params)return params.data.name+'<br/>当月<br/>销量：'+params.data.value[2]+'<br/>同比：'+params.data.value[3]+'<br/>市场份额：'+params.data.value[4]+'<br/><br/>累计<br/>'+'销量：'+params.data.value[5]+'<br/>同比：'+params.data.value[6]+'<br/>市场份额：'+params.data.value[7]}},legend: {orient: 'vertical',y: 'bottom',x:'right',data:['pm2.5'],textStyle: {color: '#fff'}},geo: {map: 'china',label: {emphasis: {show: false}},roam: true,itemStyle: {normal: {areaColor: '#323c48',borderColor: '#111'},emphasis: {areaColor: '#2a333d'}}},graphic: [{id: 'left-btn',left: 10,top: 'middle',label: {emphasis: {show: false}},roam: true,itemStyle: {normal: {areaColor: '#323c48',borderColor: '#111'},emphasis: {areaColor: '#2a333d'}}}, {id: 'right-btn',type: 'circle',shape: { r: 20 },style: {text: '>',fill: '#eee'},top: 'middle',right: 10,onclick: function () {currentIdx = (currentIdx + 1) % provinces.length;showProvince();}}],series : [{name: 'pm2.5',type: 'scatter',coordinateSystem: 'geo',data: convertData(data),symbolSize: function (val) {return val[2] / 1000;},label: {normal: {formatter: '{b}',position: 'right',show: false},emphasis: {show: true}},itemStyle: {normal: {color: '#ddb926'}}},{name: 'Top 5',type: 'effectScatter',coordinateSystem: 'geo',data: convertData(data.sort(function (a, b) {return b.value - a.value;}).slice(0, 6)),symbolSize: function (val) {return val[2] / 1000;},showEffectOn: 'render',rippleEffect: {brushType: 'stroke'},hoverAnimation: true,label: {normal: {formatter: '{b}',position: 'right',show: true}},itemStyle: {normal: {color: '#f4e925',shadowBlur: 10,shadowColor: '#333'}},zlevel: 1}]
};
showProvince();
9.http://gallery.echartsjs.com/editor.html?c=xSyxuDklzHl
var provinces = {'上海': '/asset/get/s/data-1482909900836-H1BC_1WHg.json','河北': '/asset/get/s/data-1482909799572-Hkgu_yWSg.json','山西': '/asset/get/s/data-1482909909703-SyCA_JbSg.json','内蒙古': '/asset/get/s/data-1482909841923-rkqqdyZSe.json','辽宁': '/asset/get/s/data-1482909836074-rJV9O1-Hg.json','吉林': '/asset/get/s/data-1482909832739-rJ-cdy-Hx.json','黑龙江': '/asset/get/s/data-1482909803892-Hy4__J-Sx.json','江苏': '/asset/get/s/data-1482909823260-HkDtOJZBx.json','浙江': '/asset/get/s/data-1482909960637-rkZMYkZBx.json','安徽': '/asset/get/s/data-1482909768458-HJlU_yWBe.json','福建': '/asset/get/s/data-1478782908884-B1H6yezWe.json','江西': '/asset/get/s/data-1482909827542-r12YOJWHe.json','山东': '/asset/get/s/data-1482909892121-BJ3auk-Se.json','河南': '/asset/get/s/data-1482909807135-SJPudkWre.json','湖北': '/asset/get/s/data-1482909813213-Hy6u_kbrl.json','湖南': '/asset/get/s/data-1482909818685-H17FOkZSl.json','广东': '/asset/get/s/data-1482909784051-BJgwuy-Sl.json','广西': '/asset/get/s/data-1482909787648-SyEPuJbSg.json','海南': '/asset/get/s/data-1482909796480-H12P_J-Bg.json','四川': '/asset/get/s/data-1482909931094-H17eKk-rg.json','贵州': '/asset/get/s/data-1482909791334-Bkwvd1bBe.json','云南': '/asset/get/s/data-1482909957601-HkA-FyWSx.json','西藏': '/asset/get/s/data-1482927407942-SkOV6Qbrl.json','陕西': '/asset/get/s/data-1482909909703-SyCA_JbSg.json','甘肃': '/asset/get/s/data-1482909780863-r1aIdyWHl.json','青海': '/asset/get/s/data-1482909853618-B1IiOyZSl.json','宁夏': '/asset/get/s/data-1482909848690-HJWiuy-Bg.json','新疆': '/asset/get/s/data-1482909952731-B1YZKkbBx.json','北京': '/asset/get/s/data-1482818963027-Hko9SKJrg.json','天津': '/asset/get/s/data-1482909944620-r1-WKyWHg.json','重庆': '/asset/get/s/data-1482909775470-HJDIdk-Se.json','香港': '/asset/get/s/data-1461584707906-r1hSmtsx.json','澳门': '/asset/get/s/data-1482909771696-ByVIdJWBx.json'
};var data1 = [{name: '安徽', value: [20100,'+13%','21%',20000,'+13%','21%']},{name: '北京', value: [20200,'+13%','21%',20000,'+13%','21%']},{name: '重庆', value: [20300,'+13%','21%',20000,'+13%','21%']},{name: '福建', value: [20400,'+13%','21%',20000,'+13%','21%']},{name: '甘肃', value: [20500,'+13%','21%',20000,'+13%','21%']},{name: '广东', value: [20600,'+13%','21%',20000,'+13%','21%']},{name: '广西', value: [20700,'+13%','21%',20000,'+13%','21%']},{name: '贵州', value: [20800,'+13%','21%',20000,'+13%','21%']},{name: '海南', value: [20000,'+13%','21%',20000,'+13%','21%']},{name: '河北', value: [20000,'+13%','21%',20000,'+13%','21%']},{name: '河南', value: [20000,'+13%','21%',20000,'+13%','21%']},{name: '黑龙江', value: [20000,'+13%','21%',20000,'+13%','21%']},{name: '湖北', value: [20000,'+13%','21%',20000,'+13%','21%']},{name: '湖南', value: [20000,'+13%','21%',20000,'+13%','21%']},{name: '吉林', value: [20000,'+13%','21%',20000,'+13%','21%']},{name: '江苏', value: [20000,'+13%','21%',20000,'+13%','21%']},{name: '江西', value: [20000,'+13%','21%',20000,'+13%','21%']},{name: '辽宁', value: [20000,'+13%','21%',20000,'+13%','21%']},{name: '内蒙古', value: [20000,'+13%','21%',20000,'+13%','21%']},{name: '宁夏', value: [20000,'+13%','21%',20000,'+13%','21%']},{name: '青海', value: [20000,'+13%','21%',20000,'+13%','21%']},{name: '山东', value: [20000,'+13%','21%',20000,'+13%','21%']},{name: '山西', value: [20000,'+13%','21%',20000,'+13%','21%']},{name: '陕西', value: [20000,'+13%','21%',20000,'+13%','21%']},{name: '上海', value: [20000,'+13%','21%',20000,'+13%','21%']},{name: '四川', value: [20000,'+13%','21%',20000,'+13%','21%']},{name: '天津', value: [20000,'+13%','21%',20000,'+13%','21%']},{name: '西藏', value: [20000,'+13%','21%',20000,'+13%','21%']},{name: '新疆', value: [20000,'+13%','21%',20000,'+13%','21%']},{name: '云南', value: [20000,'+13%','21%',20000,'+13%','21%']},{name: '浙江', value: [20000,'+13%','21%',20000,'+13%','21%']},{name: '香港', value: [20000,'+13%','21%',20000,'+13%','21%']},{name: '澳门', value: [20000,'+13%','21%',20000,'+13%','21%']},{name: '台湾', value: [20000,'+13%','21%',20000,'+13%','21%']}
];
option = {tooltip: {//trigger: 'item'trigger: 'item',formatter:function (params, ticket, callback) {console.log(params)return params.data.name+'<br/>当月<br/>销量：'+params.data.value[2]+'<br/>同比：'+params.data.value[3]+'<br/>市场份额：'+params.data.value[4]+'<br/><br/>累计<br/>'+'销量：'+params.data.value[5]+'<br/>同比：'+params.data.value[6]+'<br/>市场份额：'+params.data.value[7]}},toolbox: {show: true,orient: 'vertical',x: 'right',y: 'center',feature: {mark: {show: true},dataView: {show: true,readOnly: false}}},series: [{name: '选择器',type: 'map',mapType: 'china',left: 'left',top: '25%',width: '50%',height:'50%',roam: true,selectedMode: 'single',showLegendSymbol:false,itemStyle: {normal: {label: {show: true}},emphasis: {label: {show: true}}},data: data1}],animation: false
};myChart.setOption(option, true);var data2 = [{name: '太原市', value: [20100,'+13%','21%',20000,'+13%','21%']},{name: '大同市', value: [20200,'+13%','21%',20000,'+13%','21%']},{name: '阳泉市', value: [20300,'+13%','21%',20000,'+13%','21%']},{name: '长治市', value: [20400,'+13%','21%',20000,'+13%','21%']},{name: '晋城市', value: [20500,'+13%','21%',20000,'+13%','21%']},{name: '晋中市', value: [20600,'+13%','21%',20000,'+13%','21%']},{name: '运城市', value: [20700,'+13%','21%',20000,'+13%','21%']},{name: '忻州市', value: [20800,'+13%','21%',20000,'+13%','21%']},{name: '临汾市', value: [20900,'+13%','21%',20000,'+13%','21%']},{name: '吕梁市', value: [21000,'+13%','21%',20000,'+13%','21%']}
]
/*var geoCoordMap = {'太原市':[112.55,37.87],'大同市':[113.30,40.08],'阳泉市':[113.57,37.85],'长治市':[113.12,36.20],'晋城市':[112.83,35.50],'晋中市':[112.75,37.68],'运城市':[110.98,35.02],'忻州市':[112.73,38.42],'临汾市':[111.52,36.08],'吕梁市':[111.13,37.52]
}*/
var data3 = [{name: '重庆市'
}, {name: '北京市'
}, {name: '天津市'
}, {name: '上海市'
}, {name: '香港'
}, {name: '澳门'
}, {name: '巴音郭楞蒙古自治州'
}, {name: '和田地区'
}, {name: '哈密地区'
}, {name: '阿克苏地区'
}, {name: '阿勒泰地区'
}, {name: '喀什地区'
}, {name: '塔城地区'
}, {name: '昌吉回族自治州'
}, {name: '克孜勒苏柯尔克孜自治州'
}, {name: '吐鲁番地区'
}, {name: '伊犁哈萨克自治州'
}, {name: '博尔塔拉蒙古自治州'
}, {name: '乌鲁木齐市'
}, {name: '克拉玛依市'
}, {name: '阿拉尔市'
}, {name: '图木舒克市'
}, {name: '五家渠市'
}, {name: '石河子市'
}, {name: '那曲地区'
}, {name: '阿里地区'
}, {name: '日喀则地区'
}, {name: '林芝地区'
}, {name: '昌都地区'
}, {name: '山南地区'
}, {name: '拉萨市'
}, {name: '呼伦贝尔市'
}, {name: '阿拉善盟'
}, {name: '锡林郭勒盟'
}, {name: '鄂尔多斯市'
}, {name: '赤峰市'
}, {name: '巴彦淖尔市'
}, {name: '通辽市'
}, {name: '乌兰察布市'
}, {name: '兴安盟'
}, {name: '包头市'
}, {name: '呼和浩特市'
}, {name: '乌海市'
}, {name: '海西蒙古族藏族自治州'
}, {name: '玉树藏族自治州'
}, {name: '果洛藏族自治州'
}, {name: '海南藏族自治州'
}, {name: '海北藏族自治州'
}, {name: '黄南藏族自治州'
}, {name: '海东地区'
}, {name: '西宁市'
}, {name: '甘孜藏族自治州'
}, {name: '阿坝藏族羌族自治州'
}, {name: '凉山彝族自治州'
}, {name: '绵阳市'
}, {name: '达州市'
}, {name: '广元市'
}, {name: '雅安市'
}, {name: '宜宾市'
}, {name: '乐山市'
}, {name: '南充市'
}, {name: '巴中市'
}, {name: '泸州市'
}, {name: '成都市'
}, {name: '资阳市'
}, {name: '攀枝花市'
}, {name: '眉山市'
}, {name: '广安市'
}, {name: '德阳市'
}, {name: '内江市'
}, {name: '遂宁市'
}, {name: '自贡市'
}, {name: '黑河市'
}, {name: '大兴安岭地区'
}, {name: '哈尔滨市'
}, {name: '齐齐哈尔市'
}, {name: '牡丹江市'
}, {name: '绥化市'
}, {name: '伊春市'
}, {name: '佳木斯市'
}, {name: '鸡西市'
}, {name: '双鸭山市'
}, {name: '大庆市'
}, {name: '鹤岗市'
}, {name: '七台河市'
}, {name: '酒泉市'
}, {name: '张掖市'
}, {name: '甘南藏族自治州'
}, {name: '武威市'
}, {name: '陇南市'
}, {name: '庆阳市'
}, {name: '白银市'
}, {name: '定西市'
}, {name: '天水市'
}, {name: '兰州市'
}, {name: '平凉市'
}, {name: '临夏回族自治州'
}, {name: '金昌市'
}, {name: '嘉峪关市'
}, {name: '普洱市'
}, {name: '红河哈尼族彝族自治州'
}, {name: '文山壮族苗族自治州'
}, {name: '曲靖市'
}, {name: '楚雄彝族自治州'
}, {name: '大理白族自治州'
}, {name: '临沧市'
}, {name: '迪庆藏族自治州'
}, {name: '昭通市'
}, {name: '昆明市'
}, {name: '丽江市'
}, {name: '西双版纳傣族自治州'
}, {name: '保山市'
}, {name: '玉溪市'
}, {name: '怒江傈僳族自治州'
}, {name: '德宏傣族景颇族自治州'
}, {name: '百色市'
}, {name: '河池市'
}, {name: '桂林市'
}, {name: '南宁市'
}, {name: '柳州市'
}, {name: '崇左市'
}, {name: '来宾市'
}, {name: '玉林市'
}, {name: '梧州市'
}, {name: '贺州市'
}, {name: '钦州市'
}, {name: '贵港市'
}, {name: '防城港市'
}, {name: '北海市'
}, {name: '怀化市'
}, {name: '永州市'
}, {name: '邵阳市'
}, {name: '郴州市'
}, {name: '常德市'
}, {name: '湘西土家族苗族自治州'
}, {name: '衡阳市'
}, {name: '岳阳市'
}, {name: '益阳市'
}, {name: '长沙市'
}, {name: '株洲市'
}, {name: '张家界市'
}, {name: '娄底市'
}, {name: '湘潭市'
}, {name: '榆林市'
}, {name: '延安市'
}, {name: '汉中市'
}, {name: '安康市'
}, {name: '商洛市'
}, {name: '宝鸡市'
}, {name: '渭南市'
}, {name: '咸阳市'
}, {name: '西安市'
}, {name: '铜川市'
}, {name: '清远市'
}, {name: '韶关市'
}, {name: '湛江市'
}, {name: '梅州市'
}, {name: '河源市'
}, {name: '肇庆市'
}, {name: '惠州市'
}, {name: '茂名市'
}, {name: '江门市'
}, {name: '阳江市'
}, {name: '云浮市'
}, {name: '广州市'
}, {name: '汕尾市'
}, {name: '揭阳市'
}, {name: '珠海市'
}, {name: '佛山市'
}, {name: '潮州市'
}, {name: '汕头市'
}, {name: '深圳市'
}, {name: '东莞市'
}, {name: '中山市'
}, {name: '延边朝鲜族自治州'
}, {name: '吉林市'
}, {name: '白城市'
}, {name: '松原市'
}, {name: '长春市'
}, {name: '白山市'
}, {name: '通化市'
}, {name: '四平市'
}, {name: '辽源市'
}, {name: '承德市'
}, {name: '张家口市'
}, {name: '保定市'
}, {name: '唐山市'
}, {name: '沧州市'
}, {name: '石家庄市'
}, {name: '邢台市'
}, {name: '邯郸市'
}, {name: '秦皇岛市'
}, {name: '衡水市'
}, {name: '廊坊市'
}, {name: '恩施土家族苗族自治州'
}, {name: '十堰市'
}, {name: '宜昌市'
}, {name: '襄樊市'
}, {name: '黄冈市'
}, {name: '荆州市'
}, {name: '荆门市'
}, {name: '咸宁市'
}, {name: '随州市'
}, {name: '孝感市'
}, {name: '武汉市'
}, {name: '黄石市'
}, {name: '神农架林区'
}, {name: '天门市'
}, {name: '仙桃市'
}, {name: '潜江市'
}, {name: '鄂州市'
}, {name: '遵义市'
}, {name: '黔东南苗族侗族自治州'
}, {name: '毕节地区'
}, {name: '黔南布依族苗族自治州'
}, {name: '铜仁地区'
}, {name: '黔西南布依族苗族自治州'
}, {name: '六盘水市'
}, {name: '安顺市'
}, {name: '贵阳市'
}, {name: '烟台市'
}, {name: '临沂市'
}, {name: '潍坊市'
}, {name: '青岛市'
}, {name: '菏泽市'
}, {name: '济宁市'
}, {name: '德州市'
}, {name: '滨州市'
}, {name: '聊城市'
}, {name: '东营市'
}, {name: '济南市'
}, {name: '泰安市'
}, {name: '威海市'
}, {name: '日照市'
}, {name: '淄博市'
}, {name: '枣庄市'
}, {name: '莱芜市'
}, {name: '赣州市'
}, {name: '吉安市'
}, {name: '上饶市'
}, {name: '九江市'
}, {name: '抚州市'
}, {name: '宜春市'
}, {name: '南昌市'
}, {name: '景德镇市'
}, {name: '萍乡市'
}, {name: '鹰潭市'
}, {name: '新余市'
}, {name: '南阳市'
}, {name: '信阳市'
}, {name: '洛阳市'
}, {name: '驻马店市'
}, {name: '周口市'
}, {name: '商丘市'
}, {name: '三门峡市'
}, {name: '新乡市'
}, {name: '平顶山市'
}, {name: '郑州市'
}, {name: '安阳市'
}, {name: '开封市'
}, {name: '焦作市'
}, {name: '许昌市'
}, {name: '濮阳市'
}, {name: '漯河市'
}, {name: '鹤壁市'
}, {name: '大连市'
}, {name: '朝阳市'
}, {name: '丹东市'
}, {name: '铁岭市'
}, {name: '沈阳市'
}, {name: '抚顺市'
}, {name: '葫芦岛市'
}, {name: '阜新市'
}, {name: '锦州市'
}, {name: '鞍山市'
}, {name: '本溪市'
}, {name: '营口市'
}, {name: '辽阳市'
}, {name: '盘锦市'
}, {name: '忻州市'
}, {name: '吕梁市'
}, {name: '临汾市'
}, {name: '晋中市'
}, {name: '运城市'
}, {name: '大同市'
}, {name: '长治市'
}, {name: '朔州市'
}, {name: '晋城市'
}, {name: '太原市'
}, {name: '阳泉市'
}, {name: '六安市'
}, {name: '安庆市'
}, {name: '滁州市'
}, {name: '宣城市'
}, {name: '阜阳市'
}, {name: '宿州市'
}, {name: '黄山市'
}, {name: '巢湖市'
}, {name: '亳州市'
}, {name: '池州市'
}, {name: '合肥市'
}, {name: '蚌埠市'
}, {name: '芜湖市'
}, {name: '淮北市'
}, {name: '淮南市'
}, {name: '马鞍山市'
}, {name: '铜陵市'
}, {name: '南平市'
}, {name: '三明市'
}, {name: '龙岩市'
}, {name: '宁德市'
}, {name: '福州市'
}, {name: '漳州市'
}, {name: '泉州市'
}, {name: '莆田市'
}, {name: '厦门市'
}, {name: '丽水市'
}, {name: '杭州市'
}, {name: '温州市'
}, {name: '宁波市'
}, {name: '舟山市'
}, {name: '台州市'
}, {name: '金华市'
}, {name: '衢州市'
}, {name: '绍兴市'
}, {name: '嘉兴市'
}, {name: '湖州市'
}, {name: '盐城市'
}, {name: '徐州市'
}, {name: '南通市'
}, {name: '淮安市'
}, {name: '苏州市'
}, {name: '宿迁市'
}, {name: '连云港市'
}, {name: '扬州市'
}, {name: '南京市'
}, {name: '泰州市'
}, {name: '无锡市'
}, {name: '常州市'
}, {name: '镇江市'
}, {name: '吴忠市'
}, {name: '中卫市'
}, {name: '固原市'
}, {name: '银川市'
}, {name: '石嘴山市'
}, {name: '儋州市'
}, {name: '文昌市'
}, {name: '乐东黎族自治县'
}, {name: '三亚市'
}, {name: '琼中黎族苗族自治县'
}, {name: '东方市'
}, {name: '海口市'
}, {name: '万宁市'
}, {name: '澄迈县'
}, {name: '白沙黎族自治县'
}, {name: '琼海市'
}, {name: '昌江黎族自治县'
}, {name: '临高县'
}, {name: '陵水黎族自治县'
}, {name: '屯昌县'
}, {name: '定安县'
}, {name: '保亭黎族苗族自治县'
}, {name: '五指山市'
}];/*for (var i = 0; i < data2.length; i++) {data2[i].value = Math.round(Math.random() * 1000);
}*/
setTimeout(delay, 1000);function delay() {//myChart.on("mapselectchanged", function (param)myChart.on("click", function(param) {var selectedProvince = param.name;if (!provinces[selectedProvince]) {option.series.splice(1);option.legend = null;option.visualMap = null;myChart.setOption(option, true);return;}//$.get('http://echarts.baidu.com/gallery/vendors/echarts/map/json/province/' + provinces[selectedProvince] + '.json', function (geoJson) {$.get(provinces[selectedProvince], function(geoJson) {echarts.registerMap(selectedProvince, geoJson);option.series[1] = {name: '选择器',type: 'map',mapType: selectedProvince,left: '50%',top: '25%',width: '50%',height:'50%',roam: true,selectedMode: 'single',itemStyle: {normal: {label: {show: true}},emphasis: {label: {show: true}}},data: data2};option.legend = {left: 'right',data: ['随机数据']};option.visualMap = {seriesIndex: 1,orient: 'horizontal',left: 'right',min: 0,max: 1000,color: ['orange', 'yellow'],text: ['高', '低'], // 文本，默认为数值文本splitNumber: 0};myChart.setOption(option, true);});});
}
10.
11.显示平均线。
12.饼图有时间必须设置一个width，要不显示不出来。
13. http://blog.csdn.net/she_lover/article/details/51448967
14. http://echarts.baidu.com/demo.html#lines-airline
同一个起点和终点划出不同的线。
app.title = '65k+ 飞机航线';myChart.showLoading();$.get('data/asset/data/flights.json', function(data) {myChart.hideLoading();var data = [{start:[145.3918814,-6.081689],//起点经纬度end:[14.1372224,57.292222],//终点经纬度num:50//活跃次数},{start:[145.3918814,-6.081689],//起点经纬度end:[14.1372224,57.292222],//终点经纬度num:50//活跃次数},{start:[145.3918814,-6.081689],//起点经纬度end:[14.1372224,57.292222],//终点经纬度num:50//活跃次数}]var routes = [{type: 'lines',coordinateSystem: 'geo',data: [[[145.3918814,-60.081689],[14.1372224,57.292222]]],large: true,largeThreshold: 100,lineStyle: {normal: {opacity: 0.5,width: 3.5,curveness: 0.3}},// 设置混合模式为叠加blendMode: 'lighter'},{type: 'lines',coordinateSystem: 'geo',data: [[[145.3918814,-60.081689],[14.1372224,57.292222]]],large: true,largeThreshold: 100,lineStyle: {normal: {opacity: 0.5,width: 3.5,curveness: -0.3}},// 设置混合模式为叠加blendMode: 'lighter'}]myChart.setOption(option = {title: {text: 'World Flights',left: 'center',textStyle: {color: '#eee'}},backgroundColor: '#003',tooltip: {formatter: function (param) {return ""}},geo: {map: 'world',left: 0,right: 0,silent: true,itemStyle: {normal: {borderColor: '#003',color: '#005'}}},series: routes});
});
15.http://echarts.baidu.com/demo.html#graph
改变线条的粗细。
原来设置统一的线条粗线，现在每一条线都设置不同的粗线。
graph.links = graph.links.map(function(item){
item.lineStyle= {
normal: {
color: 'source',
curveness: 0.3,
width:item.weight
}
}
return item;
})
转载于:https://www.cnblogs.com/coding4/p/6726338.html
echarts的学习相关推荐
- ECharts的学习（二）：制作一个简单的饼状图，并对其设置样式
这是学习ECharts的练手之作,中文学习网址:http://echarts.baidu.com/index.html 实现效果图如下: <!DOCTYPE html> <html& ...
- Echarts案例学习-渐变堆积面积图
本文中使用的Echarts版本为:5.3.0 本系列主要是通过复现Apach Echarts官网上的示例来学习Echarts.目标图像网页地址:https://echarts.apache.org ...
- ECharts.js学习（三）
2019独角兽企业重金招聘Python工程师标准>>> ECharts.js 交互组件 ECharts.js有很多的交互组件,一般经常用到的组件有这些: title:标题组件,包 ...
- ECharts.js学习（二）动态数据绑定
Echarts 数据绑定 简单的统计表已经可以生成,不过之前图标数据都是直接写在参数里面的,而实际使用中,我们的数据一般都是异步读取的.EChart.js对于数据异步读取这块提供了异步加载的方法. 绑 ...
- echarts地图学习（使用geoJson数据绘制地图）
参考文档 使用echarts完成中国省市区县镇地图展示 echarts地图(中国地图展示各省数据) echarts实现中国地图区域分布图 vue + echarts 利用echarts中的map地图中 ...
- 【ECharts】 # ECharts入门学习
1. 简单介绍 通俗的理解,Echarts 是一个 JavaScript 插件,性能很好,可以流畅的运行在PC和移动设备上,兼容主流浏览器,提供了很多常用的图表(折线图.柱形图.散点图.饼图.K线图) ...
- echarts饼图学习
效果图 实现代码 可直接复制运行: <!DOCTYPE html> <html><head><meta charset="UTF-8"&g ...
- echarts的学习（六）调色盘的学习
调色盘 调色盘是什么 调色盘的分类 主题的调色盘 全局的调色盘 局部的调色盘 颜色渐变 线性渐变 径向渐变 调色盘是什么 我们之前的饼图的样式是这样的 以上我们也没有自己配置颜色,他就有自己的颜色了, ...
- 【ECharts学习】—实现我的第一个图表
[ECharts学习]-实现我的第一个图表 <!DOCTYPE html> <html lang="en"><head><meta cha ...
最新文章
- MPB：甘肃省科学院祝英等-药用植物地下茎内生真菌的分离纯化及鉴定
- 实现在页面上隐藏某个元素的css,有趣的css—隐藏元素的7种思路
- HIGHGUI ERROR: V4L2: Pixel format of incoming image is unsupported by OpenCV
- 武大计算机学院推免清北,南大2020年推免生来自哪儿？山大73，武大41，清北5人...
- Linux宝塔面板介绍 Centos安装宝塔面板教程
- 1 Two Sum (Array)
- java 枚举 下拉框_枚举enum在velocity模板语言中的应用-下拉菜单
- 前端学习（3274）：js中this的使用三
- Penta：一款开源的多合一自动化渗透测试命令行工具（很强，包含扫描、DNS、Shodan）
- 【C语言深入】[002] valotile 关键字：
- 计算机网络技术之城域网与三网融合技术
- [Tizen开发]SDB调试工具使用简介
- 猫途鹰联手携程集团打造面向中国出境旅行者的顶级旅行平台
- 图像的峰值信噪比（PSNR）的计算方法
- IDEA 更改配色和主题样式
- 一阶微分方程解的存在定理
- 奇安信天擎的退出以及卸载
- 2020年中国透明聚丙烯（TPP）行业概况：仍有较大市场空间 [图]
- K3 CLOUD计划管理之计划方案（MPS/MRP）
- 关于 nscd，nslcd 和 sssd 套件的综述