echarts 设置各省份颜色

ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。

支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表，同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件，支持多图表、组件的联动和混搭展现。

通用基本创建可参照echarts文档

这里只讲一下map（地图）的一些用法总结：

1、常见地图后（中国地图或者其他），我们可以发现地图的默认背景颜色是灰色的，如果需要自定义那么要设置：itemStyle=>normal=>color: '自定义的颜色值',

2、如果使用的是中国地图，需要设置每个省份的颜色，在文档中是不提供接口的，也就是没有办法自定义，这时我们可以调用“值域控件”来实现，根据每个省份的不同的值，来定义颜色；设置如下：

1）设置省份值；

series : [

{

name: '随机数据',

type: 'map',

mapType: 'china',

selectedMode : 'single',

itemStyle:{

normal:{

label:{show:true},

borderWidth:1,//省份的边框宽度

borderColor:'#f60',//省份的边框颜色

color:'#ece2df'//地图背景颜色

//areaStyle:{color:'#f60'}//设置地图颜色

},

emphasis:{label:{show:true}}

},

data:[

{name: '北京', selected:false,value:1},

{name: '天津', selected:false,value:2},

{name: '上海', selected:false,value:3},

{name: '重庆', selected:false,value:4},

{name: '河北', selected:false,value:5},

{name: '河南', selected:false,value:6},

{name: '云南', selected:false,value:7},

{name: '辽宁', selected:false,value:8},

{name: '黑龙江', selected:false,value:9},

{name: '湖南', selected:false,value:10},

{name: '安徽', selected:false,value:11},

{name: '山东', selected:false,value:12},

{name: '新疆', selected:false,value:13},

{name: '江苏', selected:false,value:14},

{name: '浙江', selected:false,value:15},

{name: '江西', selected:false,value:16},

{name: '湖北', selected:false,value:17},

{name: '广西', selected:false,value:18},

{name: '甘肃', selected:false,value:19},

{name: '山西', selected:false,value:20},

{name: '内蒙古', selected:false,value:21},

{name: '陕西', selected:false,value:22},

{name: '吉林', selected:false,value:23},

{name: '福建', selected:false,value:24},

{name: '贵州', selected:false,value:25},

{name: '广东', selected:false,value:26},

{name: '青海', selected:false,value:27},

{name: '西藏', selected:false,value:28},

{name: '四川', selected:false,value:29},

{name: '宁夏', selected:false,value:30},

{name: '海南', selected:false,value:31},

{name: '台湾', selected:false,value:32},

{name: '香港', selected:false,value:33},

{name: '澳门', selected:false,value:34}

]//各省地图颜色数据依赖value

}

]

　　2）、设置各省份的颜色，这里会显示出一个图例；

dataRange: {

x: '-1000px',//图例横轴位置

y: '-1000px',//图例纵轴位置

splitList: [

{start:1, end:1, label: '北京', color: '#cfc5de'},

{start:2, end:2, label: '天津', color: '#f1ebd1'},

{start:3, end:3, label: '上海', color: '#feffdb'},

{start:4, end:4, label: '重庆', color: '#e0cee4'},

{start:5, end:5, label: '河北', color: '#fde8cd'},

{start:6, end:6, label: '河南', color: '#e4f1d7'},

{start:7, end:7, label: '云南', color: '#fffed7'},

{start:8, end:8, label: '辽宁', color: '#e4f1d7'},

{start:9, end:9, label: '黑龙江', color: '#e4f1d7'},

{start:10, end:10, label: '湖南', color: '#fffed7'},

{start:11, end:11, label: '安徽', color: '#fffed8'},

{start:12, end:12, label: '山东', color: '#dccee7'},

{start:13, end:13, label: '新疆', color: '#fffed7'},

{start:14, end:14, label: '江苏', color: '#fce8cd'},

{start:15, end:15, label: '浙江', color: '#ddceeb'},

{start:16, end:16, label: '江西', color: '#e4f1d3'},

{start:17, end:17, label: '湖北', color: '#fde8cd'},

{start:18, end:18, label: '广西', color: '#fde8cd'},

{start:19, end:19, label: '甘肃', color: '#fde8cd'},

{start:20, end:20, label: '山西', color: '#fffdd6'},

{start:21, end:21, label: '内蒙古', color: '#ddcfe6'},

{start:22, end:22, label: '陕西', color: '#fad8e9'},

{start:23, end:23, label: '吉林', color: '#fce8cd'},

{start:24, end:24, label: '福建', color: '#fad8e8'},

{start:25, end:25, label: '贵州', color: '#fad8e8'},

{start:26, end:26, label: '广东', color: '#ddcfe8'},

{start:27, end:27, label: '青海', color: '#fad8e9'},

{start:28, end:28, label: '西藏', color: '#ddcfe6'},

{start:29, end:29, label: '四川', color: '#e4f1d5'},

{start:30, end:30, label: '宁夏', color: '#fefcd5'},

{start:31, end:31, label: '海南', color: '#fad8e9'},

{start:32, end:32, label: '台湾', color: '#fce8cd'},

{start:33, end:33, label: '香港', color: '#dc9bbb'},

{start:34, end:34, label: '澳门', color: '#e0f7cc'},

]

},

//各省地图颜色；start：值域开始值；end：值域结束值；label：图例名称；color：自定义颜色值；

转载于:https://www.cnblogs.com/ordinaryk/p/6853792.html

echarts 设置各省份颜色相关推荐

echarts折线图背景线_echarts设置折线线条颜色和折线点颜色的实例
本文主要介绍了jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法,结合实例形式分析了jQuery图表插件echarts设置折线图的相关操作技巧,需要的朋友可以参考下,希望能帮助到 ...
Echarts字体和线条颜色设置操作笔记
这篇文章主要讲述Echarts设置字体和线条的颜色相关操作笔记,希望文章对你有所帮助,主要是自己的在线笔记吧.我在前面先放各种修改前后图片颜色的对照,后面再详细介绍代码.这样更方便阅读及读者知道,是否 ...
设置echarts 的网格样式颜色
设置echarts的网格样式颜色参考API文档:http://echarts.baidu.com/option.html#xAxis.splitLine option = {xAxis: {type ...
Visual Studio Code (echarts)数据可视化瀑布图实现及标题的格式设置标题背景颜色以及设置副标题和标题加边框，设置边框背景和边框颜色柱形图颜色及柱形图的宽度设置完整代码
设置标题背景颜色以及设置副标题和标题加边框, 设置边框背景和边框颜色柱形图颜色及柱形图的宽度设置完整代码 <!DOCTYPE html> <html lang="en&q ...
echarts地图更改具体某省份颜色以及更改地图整体颜色 china.js echarts geo map
一.首先,更改地图整体背景颜色效果如下: 具体实现方法是修改echarts的option.geo.itemStyle.normal.areaColor let option = {geo: {it ...
ECharts 设置折线颜色和小圆点颜色
ECharts 设置折线颜色只需要设置lineStyle的color即可, 设置小圆点颜色只需要设置itemStyle的颜色即可. series: [{name: "seriesName&q ...
echarts 设置背景颜色
问题:echarts 设置背景颜色描述: @Kener-林峰你好,想跟你请教个问题:请问怎么设置echarts整个图标的背景颜色??我用了color属性,在官网实验的时候不显示.... 解决方案1 ...
echarts 极坐标设置分隔区域颜色
echarts 极坐标设置分隔区域颜色借用echarts 官网上的一个极坐标案例,如下图实现如下图的效果,在y轴上每一段设置颜色,形成渐变背景效果设置代码: radiusAxis: {split ...
echarts雷达图怎么给每个拐点设置不同的颜色
前言最近有这样的需求需要用到echarts的雷达图然后这不是主要的,因为基本的配置官网上都是有的,但是需求要求雷达图的每个拐点要有不同的颜色,这样比较有特色,我...最后在官网找了半天发现还是只 ...

echarts 设置各省份颜色

echarts 设置各省份颜色相关推荐

最新文章

热门文章