echarts 修改默认颜色怎么修改整个中国地图的颜色

Echarts折线图中的特定点如何改变颜色? - 知乎2被浏览1945分享邀请回答var TestArray = new Array();//随机数组
var ParaNum = 10;//设置产生多少参数
var ThinkFx = new Array();//判断拐点数组
for(var i=0;i&ParaNi++){
TestArray[i] = Math.floor(Math.random()*1000);//产生百位随机数
//ThinkFx[0]=200;
for(var j=0;j&TestArray.j++){
var inNum = TestArray[j]-TestArray[j-1];
var axNum = TestArray[j+1]-TestArray[j];//拐点判断算法
var ResultTarget = inNum * axN
//标识拐点,形成拐点判断数组
if(ResultTarget&0){
ThinkFx[j] = 0;//拐点判断
ThinkFx[j] = 200;
for(var k=0;k&ThinkFx.k++){
var boxNum = {};
//如果该位置是拐点,则新赋值一个拐点数据样式进去
if(ThinkFx[k] == 0){
boxNum = {
value:TestArray[k],
itemStyle:{
color:'red'
symbol:'pin',
symbolSize: 16
ThinkFx4.push(boxNum);
//如果不是拐点,直接赋值
ThinkFx4.push(TestArray[k]);
最后对新生成的数组载入Echarts图表中即可。1添加评论分享收藏感谢收起0添加评论分享收藏感谢收起14:43 提问
echarts地图怎么动态切换主题啊,就这种效果
按赞数排序
你都有截图了,为什么不直接用调试器调试下,并且直接拿它的js代码
setTheme方法,具体看连接:
{string | Object} theme
设置主题,内置主题('macarons', 'infographic')直接传入名称,自定义扩展主题可传入主题对象
恩,我是想实现它列子的切换效果,点击下拉框时可以切换主题,但是我这个点击的时候没有效果,也不能刷新,不知道怎么回事
&!DOCTYPE html&
&meta charset="utf-8"&
&title&ECharts&/title&
function changeTheme(self){
//var te = require('echarts/theme/macarons');
var te = require('echarts/theme/infographic');
myChart.setTheme(te);
&!-- 为ECharts准备一个具备大小(宽高)的Dom --&
&div id="main" style="height:400px"&&/div&
&select onchange='changeTheme(this)'&
&option value='1'&主题1&/option&
&option value='2'&主题2&/option&
&!-- ECharts单文件引入 --&
&script src="/build/dist/echarts.js"&&/script&
&script type="text/javascript"&
// 路径配置
require.config({
echarts: '/build/dist'
'echarts',
'echarts/chart/map',
'echarts/chart/bar' // 使用柱状图就加载bar模块,按需加载
function (ec,te) {
// 基于准备好的dom,初始化echarts图表
myChart = ec.init(document.getElementById('main'),te);
option = {
text: 'iphone销量',
subtext: '纯属虚构',
x:'center'
tooltip : {
trigger: 'item'
orient: 'vertical',
data:['iphone3','iphone4','iphone5']
dataRange: {
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}}
{name: '北京',value: Math.round(Math.random()*1000)},
{name: '天津',value: Math.round(Math.random()*1000)},
{name: '上海',value: Math.round(Math.random()*1000)},
{name: '重庆',value: Math.round(Math.random()*1000)},
{name: '河北',value: Math.round(Math.random()*1000)},
{name: '河南',value: Math.round(Math.random()*1000)},
{name: '云南',value: Math.round(Math.random()*1000)},
{name: '辽宁',value: Math.round(Math.random()*1000)},
{name: '黑龙江',value: Math.round(Math.random()*1000)},
{name: '湖南',value: Math.round(Math.random()*1000)},
{name: '安徽',value: Math.round(Math.random()*1000)},
{name: '山东',value: Math.round(Math.random()*1000)},
{name: '新疆',value: Math.round(Math.random()*1000)},
{name: '江苏',value: Math.round(Math.random()*1000)},
{name: '浙江',value: Math.round(Math.random()*1000)},
{name: '江西',value: Math.round(Math.random()*1000)},
{name: '湖北',value: Math.round(Math.random()*1000)},
{name: '广西',value: Math.round(Math.random()*1000)},
{name: '甘肃',value: Math.round(Math.random()*1000)},
{name: '山西',value: Math.round(Math.random()*1000)},
{name: '内蒙古',value: Math.round(Math.random()*1000)},
{name: '陕西',value: Math.round(Math.random()*1000)},
{name: '吉林',value: Math.round(Math.random()*1000)},
{name: '福建',value: Math.round(Math.random()*1000)},
{name: '贵州',value: Math.round(Math.random()*1000)},
{name: '广东',value: Math.round(Math.random()*1000)},
{name: '青海',value: Math.round(Math.random()*1000)},
{name: '西藏',value: Math.round(Math.random()*1000)},
{name: '四川',value: Math.round(Math.random()*1000)},
{name: '宁夏',value: Math.round(Math.random()*1000)},
{name: '海南',value: Math.round(Math.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}}
{name: '北京',value: Math.round(Math.random()*1000)},
{name: '天津',value: Math.round(Math.random()*1000)},
{name: '上海',value: Math.round(Math.random()*1000)},
{name: '重庆',value: Math.round(Math.random()*1000)},
{name: '河北',value: Math.round(Math.random()*1000)},
{name: '安徽',value: Math.round(Math.random()*1000)},
{name: '新疆',value: Math.round(Math.random()*1000)},
{name: '浙江',value: Math.round(Math.random()*1000)},
{name: '江西',value: Math.round(Math.random()*1000)},
{name: '山西',value: Math.round(Math.random()*1000)},
{name: '内蒙古',value: Math.round(Math.random()*1000)},
{name: '吉林',value: Math.round(Math.random()*1000)},
{name: '福建',value: Math.round(Math.random()*1000)},
{name: '广东',value: Math.round(Math.random()*1000)},
{name: '西藏',value: Math.round(Math.random()*1000)},
{name: '四川',value: Math.round(Math.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}}
{name: '北京',value: Math.round(Math.random()*1000)},
{name: '天津',value: Math.round(Math.random()*1000)},
{name: '上海',value: Math.round(Math.random()*1000)},
{name: '广东',value: Math.round(Math.random()*1000)},
{name: '台湾',value: Math.round(Math.random()*1000)},
{name: '香港',value: Math.round(Math.random()*1000)},
{name: '澳门',value: Math.round(Math.random()*1000)}
// 为echarts对象加载数据
myChart.setOption(option);
这个问题解决了,我整理了demo,上传到资源上了
其他相关推荐匿名用户不能发表回复!|
每天回帖即可获得10分可用分!小技巧:
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN,不得违反国家法律法规。
转载文章请注明出自“CSDN(www.csdn.net)”。如是商业用途请联系原作者。插件描述:Ets中国地图选择器demo
相关插件-地图
讨论这个项目(9)回答他人问题或分享插件使用方法奖励jQ币
醉迹满青衫 0
官网实例?
ap457921 0
官网实例?
怎么改颜色?
一转身叹流年已苍白 0
这不是ECharts官网实例吗
可以加载其他数据与穿透么?
little smart 0
可以在上面添加事件吗?
PROMULGATOR
福建省厦门市
关注作者 (17)
收藏此插件 (97)
我当前jQ币余额:正在获取..
已下载次数:689
所需jQ币:1ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/10/11,chrome,firefox,Safari等),底层依赖轻量级的Canvas类库,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验,赋予了用户对数据进行挖掘、整合的能力。
支持折线图(区域图)、柱状图(条状图)、散点图(气泡图)、K线图、饼图(环形图)、雷达图(填充雷达图)、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表,同时提供标题,详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件,支持多图表、组件的联动和混搭展现。
通用基本创建可参照
这里只讲一下map(地图)的一些用法总结:
& &1、常见地图后(中国地图或者其他),我们可以发现地图的默认背景颜色是灰色的,如果需要自定义那么要设置:itemStyle=&normal=&color: '自定义的颜色值',
& &2、如果使用的是中国地图,需要设置每个省份的颜色,在文档中是不提供接口的,也就是没有办法自定义,这时我们可以调用&值域控件&来实现,根据每个省份的不同的值,来定义颜色;设置如下:
1)设置省份值;
series : [
name: '随机数据',
type: 'map',
mapType: 'china',
selectedMode : 'single',
itemStyle:{
label:{show:true},
borderWidth:1,//省份的边框宽度
borderColor:'#f60',//省份的边框颜色
color:'#ece2df'//地图背景颜色
//areaStyle:{color:'#f60'}//设置地图颜色
emphasis:{label:{show:true}}
{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:自定义颜色值;
阅读(...) 评论()
一步小僧哈哈}

我要回帖

更多关于 echarts修改饼图颜色 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信