Echarts显示行政区域图并上色

Echarts要显示行政区域图有几种方式，这里使用type: 'map'的方式，前提是有geojson数据，这个数据的获取可以从阿里云获取，高德提供的数据

http://datav.aliyun.com/tools/atlas/

选好要展示的行政区域后下载到本地，然后按照官网的demo写就好了，官网默认的方式是根据数值行政区域的颜色自动渐变变化，但有时我们需要对每个行政区域分别显示区域，那么就得依赖dataRange属性了，如下

  async initChart1() {const dom = document.getElementById('GXChart');const myChart = echarts.init(dom);const result = await this.http.get('assets/GX.json').toPromise();const geoJSON: any = result;echarts.registerMap('GX', geoJSON);myChart.setOption({title: {text: 'XXXX标题',textAlign: 'center',left: '50%',},dataRange: {x: 'right',y: 'center',show: true,splitList: [{ start: 91, label: 'G', color: '#FF6699' },{ start: 86, end: 90, label: 'F', color: '#CC3300' },{ start: 81, end: 85, label: 'E', color: '#F7BB37' },{ start: 61, end: 80, label: 'D', color: '#3BAE56' },{ start: 41, end: 60, label: 'C', color: '#92D050' },{ start: 21, end: 40, label: 'B', color: '#3899FF' },{ start: 0, end: 20, label: 'A', color: '#BFBFBF' }],textStyle: {color: '#3899FF'},// 取消选中模式selectedMode: false,},series: [{type: 'map',mapType: 'GX',name: '广西',label: {show: true},data: [{ name: '南宁市',  value: 10 },{ name: '柳州市',  value: 20 },{ name: '桂林市',  value: 30 },{ name: '北海市',  value: 40 },{ name: '玉林市',  value: 50 },{ name: '防城港市',  value: 60 },{ name: '钦州市',  value: 70 },{ name: '贺州市',  value: 80 },{ name: '百色市',  value: 90 },{ name: '河池市',  value: 16 },{ name: '崇左市',  value: 36 },{ name: '来宾市',  value: 46 },{ name: '贵港市',  value: 56 },{ name: '梧州市',  value: 66 },],}]})}

效果：

如果需要的是默认的渐变方式，那就不要属性dataRange添加visualMap属性

visualMap: {x: 'right',y: 'center',min: 0,max: 100,show: true,text: ['高', '低'],realtime: false,calculable: true,inRange: {color: ['lightskyblue', 'yellow', 'orangered']}
},

效果：

Echarts显示行政区域图并上色相关推荐

ECharts饼状图lable显示Value所占百分比
ECharts饼状图lable显示Value所占百分比以及legend显示Value所占百分比简单的实现可以参考: export default {data() {return {}},mounte ...
echarts 3 无法显示和弦图chord解决办法
导入echarts3.7.2js,echarts3的图表都可以显示,但显示和弦图时,一直提示chord不存在尝试多种方式,如添加chord.js等(会出现别的错误,如缺少require或者缺少def ...
echarts饼状图设置label的交互效果，饼状图鼠标浮上图形才显示label和视觉引导线
echarts饼状图默认label和视觉引导线效果: 这个效果没有没有形成与用户的交互,此时添加如下设置: label: {show: false,position: 'outside'},empha ...
php echarts 两条曲线图,使用laravel和ECharts实现折线图效果的例子
1.首先引入echart.js 2.html页面,要有一个布局容器,用来显示图像,一定要设置宽和高 3.echarts折线图的使用 var myChart = echarts.init(documen ...
vue中使用ECharts实现折线图和饼图
在开发后台管理项目时,需要统计后台用户数据,以折线图和饼图的形式显示,这边采用apache-echarts来实现需求. 1.安装echarts和引入 npm install echarts --sav ...
echarts画折线图和数据excel导出
最近一直使用echarts画折线图,在此做个记录最后样式代码 <!DOCTYPE html> <html style="height: 100%">&l ...
JavaScript高德地图中绘制echarts图表随地图移动
JavaScript高德地图中绘制echarts图表随地图移动** 先上效果图实现方法如下: 使用高德地图"信息窗体",信息窗体AMap.InfoWindow的属性content ...
echarts 热点泡泡图
echarts 热点泡泡图 1 .引入echarts的js文件 2.在html中定义echarts位置 3.在js中构造渲染echarts 4.效果显示 1 .引入echarts的js文件 <s ...
【echarts】echarts绘制关系图
echarts绘制关系图,效果如图,粗麻编写,教程往下看 1.vue安装echarts npm install echarts 2.引入echarts 3.在VUE页面中编写遇到问题:关系数据显示不 ...

Echarts显示行政区域图并上色

Echarts显示行政区域图并上色相关推荐

最新文章

热门文章