Echarts地图自定义颜色

通过 visualMap 设置，设置 visualMap 中的 min 最小值、 max 最大值、 color 颜色值， echart 会根据 value 数值自动匹配对应颜色

一个是 dataRange ，在 splitList 数据中的加入对应的 color 即可（ {"name": "南海诸岛", "value": 15000,color: '#cfc5de'} ）

一、后台返回一个集合Map<String,List<Map<String,Object>>> ,每个map对应一个图。

二、jsp 页面

1、首先引入 jquery 和echarts 的 js文件

2、创建 展示环形图的div

    <div id="five"></div>

3、echarts加载，用ajax访问后台获取数据

总结：

一个页面要显示多个图表（不同的）时，添加多个div，然后给每个div加载echarts图表，配置option；

一个页面要显示多个图表（相同的）时，如上，把series设置为数组，然后一个一个的添加即可。

在使用Echarts制作柱状图的时候，通常在横轴每个标签只有一个柱子的时候，每个柱子的颜色都是一样的，如下图所示： 

然而，很多时候我们为了使界面更加美观，通常会有使每个柱子颜色都不相同的需求。那么这时候，我们需要在itemStyle的normal状态下，首先根据柱子的数量设置一个颜色的数组。然后柱子会设定颜色。如果颜色数组少于柱子的数量，则柱子会循环使用设定的颜色。 

代码如下： 

itemStyle: { 

normal: { 

color: function(params) {

//首先定义一个数组 

var colorList = [ 

'#C33531','#EFE42A','#64BD3D','#EE9201','#29AAE3', 

'#B74AE5','#0AAF9F','#E89589' 

] 

return colorList[params.dataIndex] 

},

//以下为是否显示 

label: { 

show: false 

} 

} 

} 

实现效果如图所示： 

---