5776人阅读
在option中增加属性color，并指定几种颜色，此颜色将根据饼图的区域个数循环，代码段如下：
option = {
text: '全局指标状态分布图',
x:'left',
y:'top'
tooltip : {
show: true,
formatter: &{a} &br/&{b} : {c} ({d}%)&
color:['red', 'green','yellow','blueviolet']
运行效果如图所示：
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：14473次
排名：千里之外
原创：16篇
(1)(3)(6)(3)(3)(3)(3)(1)(1)(1)echarts饼图的legend形状可以修改么
如果是柱状图，看到的legend形状是方形的，
而饼图默认是扇形的。
能否改成：
相关代码：
var option = {
x: 'center',
y: 'bottom',
//orient: 'vertical',
selectedMode:false,
//calculable : true,
series : [
name:'CPU',
type:'pie',
//radius : '30%',
tooltip : {
trigger: 'item',
formatter: "{a} &br/&{b}:({d}%)"
itemStyle: {
areaStyle: {
type: 'default'
formatter: "{d}%"
labelLine: {
] // series end
更改 data.icon 的值为 bar，对应 Series 的类型。
name:'蒸发量',
icon : 'bar',
textStyle:{fontWeight:'bold', color:'green'}
'降水量','最高气温', '最低气温'
查了一下文档，找到了修改方法。
我没有具体地试验=。=你自己看着改吧，应该很容易
参见下面的示例：/doc/example/legend.html
> 本站内容系网友提交或本网编辑转载，其目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题，请及时与本网联系，我们将在第一时间删除内容！
饼图只在鼠标放上后显示比例数据,各项不能直接显示问题. 从而得来这个问题的解决方案(蓝色字体): series : [
name:'访问来源',
type:'pie',
radius : '55%',
center: ['50%', '60%' ...
struts2整合JFreechart 饼图.折线图.柱形图 上效果图: 当然可以将数据导出图片格式存储.具体下的链接里的文件有保存成图片的操作. 因为是strust2整合JFreechart,所以strust2框架一定得搭建好. 1.导入三个包:http://download.csdn.net/detail/x0 jcommon-1 ...
解决extjs中chart显示不下legend的问题 在extjs中使用chart类绘制图表时,可以通过设置legend来添加图例,但是当图例类型较多时,就会出现legend显示不全的问题,而chart不会根据legend的标签数量做相应的调整. 翻查了官方文档,没有找到有关的说明. 于是又google搜索了一下,依然没有找到有效的解决办法,只是看到有提到可 ...
highcharts pie饼图的渲染方向,默认是顺时针的,有参数调节到逆时针么?官方demo-pie 我想逆时针进行渲染 google 没找到,api里面也没找到,是不是没这个属性的? Echarts的饼图 有一个clockWise可以调方向. 如果这样的话,就只能通过将数据倒序后进行渲染,但好像也和设计图有点偏差. 有知道的说一下 谢谢 官网demo显示 ...
Building Coder 链接:/blog/2010/05/duplicate-legend-component.html Revit 二次开发论坛链接:/viewthread.php?tid=1286&extra= 目前仍然有部分Re ...
1. iCharts iCharts是能够连接市场研究出版者.经济及产业面的资料和专业的消费者的平台,拥有数以万计的图表,涵盖层面包刮商业.经济.运动和其他类别,它让大众能够简单的了解并能够跟上世界最新统计资料的脚步. 为了拥有庞大的资料量,它提供以云端为基础和受专利保护的图表工具,让企业和个人都能推出品牌.行销以及用图表分享他们的资料,透过网站分享给数百万 ...
3.1 CAD造型技术回顾
从20世纪60年代开始,CAD造型技术由线框.自由曲面,发展到目前仍占据主流的基于约束的实体造型技术,主要有以PTC 公司的Pro/E软件为代表的参数化造型理论和以EDS公司的I-DEAS软件为代表的变量化造型理论两大技术流派.
参数化造型是由编程者预先设置一些几何图形约束,然后供设计者在造型时使用,与一个几何相关联的所有尺寸 ...
&深入理解Windows Phone 8.1 UI控件编程&本书基于最新的Windows Phone 8.1 Runtime SDK编写,全面深入地论述了最酷的UI编程技术:实现复杂炫酷的动画.掌握布局原理.列表虚拟化原理.高性能列表实现.图表编程.控件原理等. 全书源代码免费下载: /s/zt_pyr ...打酱油震惊呵呵赞鄙视标签： ,,注：与内容无关的评论将被删除，严重者禁用帐号！ | 最新评论不吐不快，赶紧来一发！栏目推荐关注 第一PHP社区 微信公众号热门点击本站推荐
| 中国最专业的PHP中文社区 |
Copyright (C) 1998 - . All Rights Reserved
第一PHP社区
版权所有 七牛云存储为本站提供加速支持 &&&&&&&&&百度Echarts示例-echarts-demo 折线图 Line 饼状图 Pie 柱状图 Bar 中国地图 ChinaMap
百度Echarts示例-echarts-demo 折线图 Line 饼状图 Pie 柱状图 Bar 中国地图 ChinaMap
百度Echarts示例-echarts-demo 折线图 Line 饼状图 Pie 柱状图 Bar 中国地图 ChinaMap
若举报审核通过，可奖励20下载分
被举报人：
举报的资源分：
请选择类型
资源无法下载
资源无法使用
标题与实际内容不符
含有危害国家安全内容
含有反动色情等内容
含广告内容
版权问题，侵犯个人或公司的版权
*详细原因：
VIP下载&&免积分60元/年（1200次）
您可能还需要
移动开发下载排行百度Echarts折线图,柱状图,饼图实例
//折线图--单个Y轴
var lineChart =
echarts.init(document.getElementByIdx_x('PolyLine'));
var optionLine = {
text: '对数轴示例',
left: 'center'
tooltip: {
trigger: 'item',
formatter: '{a}
{b} : {c}'
left: 'left',
data: ['2的指数', '3的指数','1/2的对数']
//直角坐标系 grid 中的 x 轴，单个 grid 组件最多只能放上下两个 x 轴。
type: 'category',
name: 'x',
splitLine: {show: false},
data: ['一', '二', '三', '四', '五', '六', '七', '八', '九']
//直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。
//组件离容器左侧的距离,值可以是像 20 这样的具体像素值，可以是像
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
//直角坐标系 grid 中的 y 轴，单个 grid 组件最多只能放左右两个 y 轴。
type: 'log',
//系列列表,每个系列通过 type 决定自己的图表类型
name: '3的指数',
type: 'line',
data: [1, 3, 9, 27, 81, 247, 741, ]
name: '2的指数',
type: 'line',
data: [1, 2, 4, 8, 16, 32, 64, 128, 256]
name: '1/2的指数',
type: 'line',
data: [1/2, 1/4, 1/8, 1/16, 1/32, 1/64, 1/128, 1/256,
//数据分区颜色值
color:['#FFA60C','#0580b9','#28c6b9']
lineChart.setOption(optionLine);
//折线图--双Y轴
& & var blodChart =
echarts.init(document.getElementByIdx_x('BlodLine'));
& & var optionpBlod =
& &title : {
&text: '销量-销售额',
& &tooltip : {
& & & trigger:
& &legend: {
data:['销量','销售额']
//工具栏,内置有导出图片,数据视图,动态类型切换，数据区域缩放，重置五个工具。
& &toolbox: {
& & & show :
& & & feature :
& & mark : {show: true},
//数据视图
& & dataView : {show: true,
readOnly: false},
//动态类型切换
& & magicType : {show: true,
type: ['line', 'bar']},
& & restore : {show: true},
& &//导出图片
& & saveAsImage : {show:
& &calculable : true,
//直角坐标系 grid 中的 x 轴，单个 grid 组件最多只能放上下两个 x 轴。
& &xAxis : [
//'value' 数值轴,适用于连续数据;
//'category' 类目轴,适用于离散的类目数据,为该类型时必须通过 data 设置类目数据
时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
//'log' 对数轴。适用于对数数据。
& & type : 'category',
//类目轴中 boundaryGap 可以配置为 true 和 false。默认为
true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。
& & boundaryGap : false,
& & data :
["05/01","05/02","05/03","05/04","05/05","05/06","05/07","05/08","05/09","05/10","05/11","05/12","05/13","05/14","05/15","05/16","05/17","05/18","05/19","05/20","05/21","05/22","05/23","05/24","05/25",]
//直角坐标系 grid 中的 y 轴，单个 grid 组件最多只能放左右两个 y 轴。
& &yAxis : [
//type类型同xAxis
& { type: 'value', &name: '销量',
&show: true }, &{ type: 'value',
&show: true, &name: '销售额',
& &series : [
//系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption
更新数据和配置项时用于指定对应的系列。
& & name:'销量',
//类型 &默认 line
& & type:'line',
//折线拐点标志的样式
itemStyle : {
//图形的颜色。 默认从全局调色盘 option.color 获取颜色
& normal : {
color:'#FFA60C'
//系列中的数据内容数组,在坐标系两个轴都为数值轴的时候，每个数据项需要是一个数组
data:[87,81,36,27,82,38,55,19,991]
& & name:'销售额',
& & type:'line',
& & yAxisIndex: 1,
itemStyle : {
& normal : {
color:'#427FE9'
data:[235,154,680,064,825,631,523,005,044,978,672,099,76016]
blodChart.setOption(optionpBlod);
& & var pieChart =
echarts.init(document.getElementByIdx_x('PolyPie'));
var option = {
//饼图标题
text: '某站点用户访问来源',
//饼图副题
subtext: '纯属虚构',
//是否居中
x:'center'
//提示框组件
tooltip : {
trigger: 'item',
formatter: "{a}
{b} : {c} ({d}%)"
//左边的提示,分区提示
orient: 'vertical',
left: 'left',
data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
//系列列表,每个系列通过 type 决定自己的图表类型
series : [
name: '访问来源',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
//数据分区部分
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
//数据分区颜色值
color:['#FFA60C','#0580b9','#28c6b9','#84e6f1','#dddddd']
pieChart.setOption(option);
var zhuChart =
echarts.init(document.getElementByIdx_x('PolyZhu'));
optionzhu = {
& & tooltip : {
& trigger: 'axis',
& axisPointer : { &
& &// 坐标轴指示器，坐标轴触发有效
& & & type :
'shadow' & & &
&// 默认为直线，可选为：'line' | 'shadow'
& & legend: {
data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎','百度','谷歌','必应','其他']
& & grid: {
& left: '3%',
& right: '4%',
& bottom: '3%',
& containLabel: true
& & xAxis : [
& & & type :
'category',
& & & data :
['周一','周二','周三','周四','周五','周六','周日']
& & yAxis : [
& & & type :
& & series : [
name:'直接访问',
type:'bar',
& & & data:[320,
332, 301, 334, 390, 330, 320]
name:'邮件营销',
type:'bar',
& & & stack:
& & & data:[120,
132, 101, 134, 90, 230, 210]
name:'联盟广告',
type:'bar',
& & & stack:
& & & data:[220,
182, 191, 234, 290, 330, 310]
name:'视频广告',
type:'bar',
& & & stack:
& & & data:[150,
232, 201, 154, 190, 330, 410]
name:'搜索引擎',
type:'bar',
& & & data:[862,
& & & markLine :
& & lineStyle: {
& normal: {
& & & type:
& & data : [
& [{type : 'min'}, {type : 'max'}]
name:'百度',
type:'bar',
& & & barWidth :
& & & stack:
'搜索引擎',
& & & data:[620,
732, 701, 734, , 1120]
name:'谷歌',
type:'bar',
& & & stack:
'搜索引擎',
& & & data:[120,
132, 101, 134, 290, 230, 220]
name:'必应',
type:'bar',
& & & stack:
'搜索引擎',
& & & data:[60,
72, 71, 74, 190, 130, 110]
name:'其他',
type:'bar',
& & & stack:
'搜索引擎',
& & & data:[62,
82, 91, 84, 109, 110, 120]
zhuChart.setOption(optionzhu);
//柱状图-向右
var rightChart =
echarts.init(document.getElementByIdx_x('PolyRight'));
var optionRight = {
& & title: {
& text: '世界人口总量',
& subtext: '数据来自网络'
& & tooltip: {
& trigger: 'axis',
& axisPointer: {
& & & type:
& & legend: {
& data: ['2011年', '2012年']
& & grid: {
& left: '3%',
& right: '4%',
& bottom: '3%',
& containLabel: true
& & xAxis: {
& type: 'value',
& boundaryGap: [0, 0.01]
& & yAxis: {
& type: 'category',
& data: ['巴西','印尼','美国','印度','中国','世界人口(万)']
& & series: [
& & & name:
& & & type:
& & & data:
[1, 2, 0230]
& & & name:
& & & type:
& & & data:
[1, 3, 1807]
rightChart.setOption(optionRight);
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。