问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
求助。请问左上角的长方形怎么修改成结果图左上角的扇形。请各位大神指导~~~已经看了api的配置，然。还是找不到结果~谢谢！
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
3.x最新版本中 提供了修改图例icon的办法 但是
图例项的 icon。
可选自带的标记类型， 有 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
依然没有题主想要的扇形配置。。不过现在可以插入矢量图了
在 ECharts 3 里可以通过 'path://' 设置为任意的矢量路径，这种方式相比于图片来说不用担心因为缩放而产生锯齿或模糊，而且可以设置为任意颜色。路径图形会自适应调整为合适（如果是 symbol 的话就是 symbolSize）的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
同步到新浪微博
分享到微博？
你好！看起来你挺喜欢这个内容，但是你还没有注册帐号。 当你创建了帐号，我们能准确地追踪你关注的问题，在有新答案或内容的时候收到网页和邮件通知。还能直接向作者咨询更多细节。如果上面的内容有帮助，记得点赞 (????)? 表示感谢。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：23363人阅读
HTML网页知识（8）
& & & & 这篇文章主要讲述Echarts设置字体和线条的颜色相关操作笔记，希望文章对你有所帮助，主要是自己的在线笔记吧。我在前面先放各种修改前后图片颜色的对照，后面再详细介绍代码。这样更方便阅读及读者知道，是否对自己有所帮助，其重点是如何在模板动态网页或JSP网站中插入Echarts图片。& & & & 1.修改标题及背景颜色&&& & & &&2.设置柱形图颜色& & & &&3.修改坐标轴字体颜色& & & &&4.设置Legend颜色& & & & 5.修改折线颜色&&& & & & 6.修改油表盘字体大小及颜色& & & & 7.柱状图文本鼠标浮动上的颜色设置& & & & 推荐文章：& & & &&& & & &&& & & & 官方文档：& & & &&& & & &&& & & &&1.修改标题的颜色及背景& & & & Echarts绘制柱状图及修改标题颜色的代码如下所示：&!DOCTYPE html&
&meta charset=&utf-8&&
&title&ECharts&/title&
&script src=&echarts.min.js&&&/script&
&div id=&main& style=&width: 600height:400&&&/div&
&script type=&text/javascript&&
var myChart = echarts.init(document.getElementById('main'));
var labelRight = {
normal: { position: 'right' }
var labelRight = {
normal: { position: 'right' }
var option = {
text: '十大高耗水行业用水量八减两增 ',
backgroundColor: '#ff0000',
subtext: '同比百分比(%)',
textStyle: {
fontWeight: 'normal',
//标题颜色
color: '#408829'
x:&center&
data:['蒸发量','降水量','最低气温','最高气温']
tooltip : {
trigger: 'axis',
axisPointer : {
// 坐标轴指示器，坐标轴触发有效
type : 'shadow'
// 默认为直线，可选为：'line' | 'shadow'
bottom: 80
type : 'value',
position: 'top',
splitLine: {lineStyle:{type:'dashed'}},
type : 'category',
axisLine: {show: false},
axisLabel: {show: false},
axisTick: {show: false},
splitLine: {show: false},
data : ['石油加工、炼焦和核燃料加工业' ,
'非金属矿物制品业',
'化学原料和化学制品制造业',
'有色金属冶炼和压延加工业',
'造纸和纸制品业', '纺织业',
'电力、热力生产和供应业',
'非金属矿采选业',
'黑色金属冶炼和压延加工业',
'煤炭开采和洗选业'
series : [
name: '幅度 ',
type: 'bar',
stack: '总量',
show: true,
formatter: '{b}'
{value: 0.2, label: labelRight,itemStyle:{ normal:{color:'gray'} } },
{value: 0.7, label: labelRight,itemStyle:{ normal:{color:'gray'} }},
{value: -1.1, label: labelRight,itemStyle:{ normal:{color:'gray'} }},
{value: -1.3, label: labelRight,itemStyle:{ normal:{color:'gray'} }},
{value: -1.9, label: labelRight,itemStyle:{ normal:{color:'gray'} }},
{value: -2.9, label: labelRight,itemStyle:{ normal:{color:'gray'} }},
{value: -3.0, label: labelRight,itemStyle:{ normal:{color:'gray'} }},
{value: -4.2, label: labelRight,itemStyle:{ normal:{color:'gray'} }},
{value: -4.9, label: labelRight,itemStyle:{ normal:{color:'gray'} }},
{value: -5.8, label: labelRight,itemStyle:{ normal:{color:'gray'} }},
myChart.setOption(option);
window.addEventListener(&resize&,function() {
myChart.resize();
&div id=&main2& style=&width: 600height:400&&
& & & & 其中设置颜色标题的核心代码：title: {
text: '十大高耗水行业用水量八减两增 ',
backgroundColor: '#ff0000',
subtext: '同比百分比(%)',
textStyle: {
fontWeight: 'normal',
//标题颜色
color: '#408829'
x:&center&
},& & & & 输出如下图所示：&&2.设置柱形图颜色& & & & 设置柱形图颜色代码如下所示，其中颜色表参考：series : [
name: '幅度 ',
type: 'bar',
stack: '总量',
show: true,
formatter: '{b}'
{value: 0.2, label: labelRight,itemStyle:{ normal:{color:'bule'} } },
{value: 0.7, label: labelRight,itemStyle:{ normal:{color:'green'} }},
{value: -1.1, label: labelRight,itemStyle:{ normal:{color:'red'} }},
{value: -1.3, label: labelRight,itemStyle:{ normal:{color:'#FFB6C1'} }},
{value: -1.9, label: labelRight,itemStyle:{ normal:{color:'#EE7AE9y'} }},
{value: -2.9, label: labelRight,itemStyle:{ normal:{color:'#C1FFC1'} }},
{value: -3.0, label: labelRight,itemStyle:{ normal:{color:'#AB82FF'} }},
{value: -4.2, label: labelRight,itemStyle:{ normal:{color:'#836FFF'} }},
{value: -4.9, label: labelRight,itemStyle:{ normal:{color:'#00FA9A'} }},
{value: -5.8, label: labelRight,itemStyle:{ normal:{color:'#CD00CD'} }},
}& & & & 输出如下图所示：3.修改坐标字体颜色& & & & 完整代码：&!DOCTYPE html&
&meta charset=&utf-8&&
&title&ECharts&/title&
&!-- 引入 echarts.js --&
&script src=&echarts.min.js&&&/script&
&!-- 为ECharts准备一个具备大小（宽高）的Dom --&
&div align=&left& id=&main& style=&width: 900height:500&&&/div&
&script type=&text/javascript&&
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
option = {
text: '2016年上半年全国规模以上工业企业用水情况（单位：亿立方米）',
subtext: '数据来源：国家统计局',
x: 'center',
tooltip : {
trigger: 'axis',
axisPointer : {
// 坐标轴指示器，坐标轴触发有效
type : 'shadow'
// 默认为直线，可选为：'line' | 'shadow'
orient: 'vertical',
x: 'left',
padding:50,
data: ['用水量', '减少量',]
left: '10',
right: '60',
bottom: '3%',
height: '30%',
top: '20%',
containLabel: true
type: 'value',
//设置坐标轴字体颜色和宽度
axisLine:{
lineStyle:{
color:'yellow',
type: 'category',
//设置坐标轴字体颜色和宽度
axisLine:{
lineStyle:{
color:'yellow',
data: ['东部地区','中部地区','西部地区',]
name: '用水量',
type: 'bar',
stack: '总量',
show: true,
position: 'insidelift'
data: [109.2, 48.2, 41 ]
name: '减少量',
type: 'bar',
stack: '总量',
show: true,
position: 'insidelift'
data: [1.638, 1.]
myChart.setOption(option);
&/html&& & & & 核心代码如下所示：yAxis: {
type: 'category',
//设置坐标轴字体颜色和宽度
axisLine:{
lineStyle:{
color:'yellow',
data: ['东部地区','中部地区','西部地区',]
},& & & & 输出如下图所示：4.设置了legend颜色& & & & 核心代码代码如下：legend: {
orient: 'vertical',
//data:['用水量','减少量'],
data:[ {name: '用水量',
textStyle:{color:&#25c36c&}
{name:'减少量',
textStyle:{color:&#25c36c&}}
x: 'left',
padding:50,
},& & & & 输出如下图所示：5.修改折现颜色& & & & 代码如下所示：&!DOCTYPE html&
&meta charset=&utf-8&&
&title&ECharts&/title&
&!-- 引入 echarts.js --&
&script src=&echarts.min.js&&&/script&
&!-- 为ECharts准备一个具备大小（宽高）的Dom --&
&div id=&main& style=&width: 600height:400&&&/div&
&script type=&text/javascript&&
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var timeData = [
'海水','陆地苦咸水','矿井水',
'雨水','再生水','海水淡化水'];
timeData = timeData.map(function (str) {
return str.replace('2016/', '');
option = {
text: '2016年上半年全国工业用水增长率',
x: 'center'
tooltip: {
trigger: 'axis',
axisPointer: {
animation: false
data:['常规用水量','非常规用水量'],
x:&right&,
padding: 50
left: 100,
right: 100,
height: '20%',
top: '25%'
left: 100,
right: 100,
top: '65%',
height: '25%'
type : 'category',
boundaryGap : false,
axisLine: {onZero: true},
data:['地表淡水','地下淡水','自来水','其他水']
gridIndex: 1,
type : 'category',
boundaryGap : false,
axisLine: {onZero: true},
data: timeData,
position: 'top'
name : '常规用水量(%)',
type : 'value',
gridIndex: 1,
name : '非常规用水量(%)',
type : 'value',
inverse: true
series : [
name:'常规用水量',
type:'line',
symbolSize: 8,
//设置折线图颜色
itemStyle : {
normal : {
lineStyle:{
color:'#ff0000'
hoverAnimation: false,
data:[-3.8,-9.0,0.0,4.5 ]
name:'非常规用水量',
type:'line',
xAxisIndex: 1,
yAxisIndex: 1,
symbolSize: 8,
//设置折线图颜色
itemStyle : {
normal : {
lineStyle:{
color:'#0000ff'
hoverAnimation: false,
data: [-5.8,-2.5,6.2,50.3,3.5,-3.3 ]
myChart.setOption(option);
&/html&& & & & 其中修改折现颜色代码如下所示：series : [
name:'常规用水量',
type:'line',
symbolSize: 8,
itemStyle : {
normal : {
lineStyle:{
color:'#ff0000'
hoverAnimation: false,
data:[-3.8,-9.0,0.0,4.5 ]
name:'非常规用水量',
type:'line',
xAxisIndex: 1,
yAxisIndex: 1,
itemStyle : {
normal : {
lineStyle:{
color:'#ff0000'
symbolSize: 8,
hoverAnimation: false,
data: [-5.8,-2.5,6.2,50.3,3.5,-3.3 ]
]& & & & 修改图如下所示：6.修改油表盘字体大小及颜色& & & & 核心代码如下所示：&!DOCTYPE html&
&meta charset=&utf-8&&
&title&ECharts&/title&
&!-- 引入 echarts.js --&
&script src=&echarts.min.js&&&/script&
&!-- 为ECharts准备一个具备大小（宽高）的Dom --&
&div id=&main& style=&width: 800height:600&&&/div&
&script type=&text/javascript&&
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
option = {
tooltip : {
formatter: &{a} &br/&{c}{b}&
toolbox: {
show: true,
feature: {
restore: {show: true},
saveAsImage: {show: true}
series : [
name: '东部地区',
type: 'gauge',
splitNumber: 12,
radius: '50%',
axisLine: {
// 坐标轴线
lineStyle: {
// 属性lineStyle控制线条样式
axisTick: {
// 坐标轴小标记
length: 15,
// 属性length控制线长
lineStyle: {
// 属性lineStyle控制线条样式
color: 'auto'
splitLine: {
length: 20,
// 属性length控制线长
lineStyle: {
// 属性lineStyle（详见lineStyle）控制线条样式
color: 'auto'
textStyle: {
// 其余属性默认使用全局文本样式，详见TEXTSTYLE
fontWeight: 'bolder',
fontSize: 20,
fontStyle: 'italic',
color:&#25c36c&
detail : {
textStyle: {
// 其余属性默认使用全局文本样式，详见TEXTSTYLE
fontWeight: 'bolder'
data:[{value: 109.2, textStyle:{color:&#25c36c&}, name: '
东部地区\n 用水量'}]
name: '下降',
type: 'gauge',
center : ['50%', '65%'],
// 默认全局居中
radius : '25%',
startAngle: 315,
endAngle: 225,
splitNumber: 2,
axisLine: {
// 坐标轴线
lineStyle: {
// 属性lineStyle控制线条样式
axisTick: {
// 坐标轴小标记
show: false
axisLabel: {
formatter:function(v){
switch (v + '') {
case '0' : return '0';
case '1' : return '下降';
case '2' : return '1.5%';
splitLine: {
length: 15,
// 属性length控制线长
lineStyle: {
// 属性lineStyle（详见lineStyle）控制线条样式
color: 'auto'
pointer: {
show: false
show: false
data:[{value: 2, name: '下降'}]
name: '中部地区',
type: 'gauge',
center: ['20%', '55%'],
// 默认全局居中
radius: '35%',
endAngle:45,
splitNumber:8,
axisLine: {
// 坐标轴线
lineStyle: {
// 属性lineStyle控制线条样式
axisTick: {
// 坐标轴小标记
length:12,
// 属性length控制线长
lineStyle: {
// 属性lineStyle控制线条样式
color: 'auto'
splitLine: {
length:20,
// 属性length控制线长
lineStyle: {
// 属性lineStyle（详见lineStyle）控制线条样式
color: 'auto'
pointer: {
offsetCenter: [0, '-30%'],
// x, y，单位px
textStyle: {
// 其余属性默认使用全局文本样式，详见TEXTSTYLE
fontWeight: 'bolder'
data:[{value: 48.2, name: '
中部地区ddd',textStyle:{color:&#ffff00&}
name: '下降',
type: 'gauge',
center : ['20%', '62%'],
// 默认全局居中
radius : '25%',
startAngle: 315,
endAngle: 225,
splitNumber: 2,
axisLine: {
// 坐标轴线
lineStyle: {
// 属性lineStyle控制线条样式
axisTick: {
// 坐标轴小标记
show: false
axisLabel: {
formatter:function(v){
switch (v + '') {
case '0' : return '0';
case '1' : return '下降';
case '2' : return '2.1%';
splitLine: {
length: 15,
// 属性length控制线长
lineStyle: {
// 属性lineStyle（详见lineStyle）控制线条样式
color: 'auto'
pointer: {
show: false
show: false
data:[{value: 2, name: '下降'}]
name: '西部地区',
type: 'gauge',
center: ['85%', '55%'],
// 默认全局居中
radius: '35%',
endAngle:45,
splitNumber:8,
axisLine: {
// 坐标轴线
lineStyle: {
// 属性lineStyle控制线条样式
axisTick: {
// 坐标轴小标记
length:12,
// 属性length控制线长
lineStyle: {
// 属性lineStyle控制线条样式
color: 'auto'
splitLine: {
length:20,
// 属性length控制线长
lineStyle: {
// 属性lineStyle（详见lineStyle）控制线条样式
color: 'auto'
pointer: {
offsetCenter: [0, '-30%'],
// x, y，单位px
textStyle: {
// 其余属性默认使用全局文本样式，详见TEXTSTYLE
fontWeight: 'bolder'
data:[{value: 41, name: '
西部地区\n 用水量',
textStyle:{color:&#ffff00&} }]
name: '下降',
type: 'gauge',
center : ['85%', '62%'],
// 默认全局居中
radius : '25%',
startAngle: 315,
endAngle: 225,
splitNumber: 2,
axisLine: {
// 坐标轴线
lineStyle: {
// 属性lineStyle控制线条样式
axisTick: {
// 坐标轴小标记
show: false
axisLabel: {
formatter:function(v){
switch (v + '') {
case '0' : return '0';
case '1' : return '下降';
case '2' : return '2.5%';
splitLine: {
length: 15,
// 属性length控制线长
lineStyle: {
// 属性lineStyle（详见lineStyle）控制线条样式
color: 'auto'
pointer: {
show: false
show: false
data:[{value: 2, name: '下降'}]
app.timeTicket = setInterval(function (){
myChart.setOption(option,true);
myChart.setOption(option);
&/html&& & & & 修改核心代码：title : {
textStyle: {
// 其余属性默认使用全局文本样式，详见TEXTSTYLE
fontWeight: 'bolder',
fontSize: 20,
color:&#7FFFD4&
detail : {
textStyle: {
// 其余属性默认使用全局文本样式，详见TEXTSTYLE
fontWeight: 'bolder'
value: 109.2,
name: '\n\n
东部地区\n 用水量'}]
},& & & & 核心代码如下所示：7.柱状图文本鼠标浮动上的颜色设置& & & & 需要修改的内容如下图所示：& & & & 代码如下所示：&!DOCTYPE html&
&meta charset=&utf-8&&
&title&ECharts&/title&
&script src=&echarts.min.js&&&/script&
&div id=&main& style=&width: 600height:400&&&/div&
&script type=&text/javascript&&
var myChart = echarts.init(document.getElementById('main'));
var labelRight = {
position: 'right'
var labelRight = {
position: 'right'
var option = {
十大高耗水行业用水量八减两增 ',
subtext: '同比百分比(%)',
tooltip : {
trigger: 'axis',
axisPointer : {
// 坐标轴指示器，坐标轴触发有效
type : 'shadow'
// 默认为直线，可选为：'line' | 'shadow'
bottom: 80
type : 'value',
position: 'top',
splitLine: {lineStyle:{type:'dashed'}},
type : 'category',
axisLine: {show: false},
axisLabel: {show: false},
axisTick: {show: false},
splitLine: {show: false},
data : ['石油加工、炼焦和核燃料加工业' , '非金属矿物制品业',
'化学原料和化学制品制造业', '有色金属冶炼和压延加工业', '造纸和纸制品业', '纺织业',
'电力、热力生产和供应业', '非金属矿采选业', '黑色金属冶炼和压延加工业', '煤炭开采和洗选业']
series : [
name:'幅度 ',
type:'bar',
stack: '总量',
show: true,
formatter: '{b}'
{value: 0.2, label: labelRight, itemStyle:{ normal:{color:'gray'} } },
{value: 0.7, label: labelRight},
{value: -1.1, label: labelRight},
{value: -1.3, label: labelRight},
{value: -1.9, label: labelRight,
itemStyle:{
color:'#28c6de',
label: {textStyle:{color:'#00ff00'}}
{value: -2.9, label: labelRight},
{value: -3.0, label: labelRight},
{value: -4.2, label: labelRight},
{value: -4.9, label: labelRight},
{value: -5.8, label: labelRight},
myChart.setOption(option);
&/html&& & & & 核心代码：data:[
{value: 0.2, label: labelRight, itemStyle:{ normal:{color:'gray'} } },
{value: 0.7, label: labelRight},
{value: -1.1, label: labelRight},
{value: -1.3, label: labelRight},
{value: -1.9, label: labelRight,
itemStyle:{
color:'#28c6de',
label: {textStyle:{color:'#00ff00'}}
{value: -2.9, label: labelRight},
{value: -3.0, label: labelRight},
{value: -4.2, label: labelRight},
{value: -4.9, label: labelRight},
{value: -5.8, label: labelRight},
]& & & & 输出结果：& & & & 自适应大小，添加如下代码：// 为echarts对象加载数据
myChart.setOption(option);
// 加上这一句即可
window.onresize = myChart.& & & & 或者：window.addEventListener(&resize&,function(){
option.chart.resize();
});& & & & 最后文章对你有所帮助，和学生相处就是不错，但enjoy myself~& & & &&(By:Eastmount
中午1点半&&)
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：1714669次
积分：18296
积分：18296
排名：第524名
原创：255篇
转载：10篇
评论：1357条
作者：杨秀璋
学历：本科-北京理工大学
&&&&&&&&&&&硕士-北京理工大学
现任教于贵财财经大学信息学院
简介：自幼受贵州大山的熏陶，养成了诚实质朴的性格。经过寒窗苦读，考入BIT，为完成自己的教师梦，放弃IT、航天等工作，成为贵财一名大学教师，并想把自己所学所感真心传授给自己的学生，帮助更多陌生人。
贵州纵美路迢迢，
为负劳心此一遭。
收得破书三四本，
也堪将去教尔曹。
娜美人生，醉美生活。
他和她经历风雨，慢慢变老。
文章：13篇
阅读：81132
文章：12篇
阅读：60473
文章：37篇
阅读：328972
文章：29篇
阅读：304476
文章：18篇
阅读：149024
文章：12篇
阅读：69369
文章：19篇
阅读：152671
文章：16篇
阅读：88242
文章：20篇
阅读：121768
文章：13篇
阅读：90653
(1)(1)(4)(3)(2)(4)(11)(2)(1)(2)(10)(9)(5)(3)(3)(2)(3)(4)(2)(3)(5)(5)(6)(11)(20)(6)(3)(5)(13)(5)(7)(7)(5)(7)(8)(9)(3)(2)(1)(1)(6)(3)(6)(5)(7)(1)(1)(1)(10)(4)(6)(3)(4)(2)(2)
【算法知识】
【C# .NET】
【游戏开发】
【Android】
【正能量&导师】
【图形&视频处理】
【各种知识】
【数据挖掘】
【.NET MF&嵌入式】
【架构&模式】
【操作系统】
【IOS开发】
【CSDN扫地僧】拒绝访问 |
| 百度云加速
请打开cookies.
此网站 () 的管理员禁止了您的访问。原因是您的访问包含了非浏览器特征(3a651d90d2f043a7-ua98).
重新安装浏览器，或使用别的浏览器匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。}