文档章节

Js + echarts - Pie legend 位置调整和值添加

o
 osc_4nmshwhm
发布于 2018/08/06 22:47
字数 325
阅读 9
收藏 0

精选30+云产品,助力企业轻松上云!>>>

var drawPieChart=function(chartId,titleText){

var chartData=[
{value:335, name:'原因1',trend:'up'},
{value:310, name:'原因2',trend:'up'},
{value:234, name:'原因3',trend:'dw'},
{value:135, name:'原因4',trend:'dw'},
{value:1548, name:'原因5',trend:'eq'}
]
var option = {
title : {
text: titleText,
subtext: '',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',      
right: 'right',        //靠右
top:'middle',        //垂直居中
formatter:function(name){    //在legend后加上趋势箭头,数值和百分比
var total=0, target,trend;  //echarts pie legend字面量有name值,value需要靠外部的chartData对象根据name值匹配获取
_.each(chartData,function(value, i){
total+=chartData[i].value
if(chartData[i].name==name){
target=chartData[i].value
trend=chartData[i].trend
}
})
var resultStr=name + ' | ' + ((target/total)*100).toFixed(2)+'%' + " "
if(trend=='up'){    //根据趋势值来获取对应的图表及样式,样式规则{style | string},legend样式text写在Style rich 里
resultStr+='{g| ↑}'
}else if(trend=='dw'){
resultStr+='{r| ↓}'
}else if(trend=='eq'){
resultStr+='{y| ━}'
}
resultStr+= '¥ ' + target

return resultStr
},
data: ['原因1','原因2','原因3','原因4','原因5'],
textStyle:{
rich:{
r:{
color:'red'
},
y:{
color:'orange'
},
g:{
color:'green'
}
}
}
},
series : [
{
name: '访问来源',
type: 'pie',
radius : ['30%', '45%'],  //半径值,为圆环
center: ['35%', '40%'],  //宽比,高比
data:[
{value:335, name:'原因1'},
{value:310, name:'原因2'},
{value:234, name:'原因3'},
{value:135, name:'原因4'},
{value:1548, name:'原因5'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};

var myChart=echarts.init(document.getElementById(chartId))
myChart.setOption(option);
window.addEventListener('resize',myChart.resize)
}
o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
echarts 基本使用

echarts官网 提供了源码和说明文档,使用echarts需要先到官网下载需要的js源文件。 官网上的demo中夹杂着很多我们用不到的东西,想使用饼状图就得从demo中把不用的去掉,劈植斩叶留下最原始的...

youfen
2019/06/04
29
0
ECharts 简单的使用过程,完美的图形展示

最近开发项目时要做图形报表,网上找了些东西,还是觉得ECharts靠谱,具备诸多优点,功能强大,图表完美,兼容性也比较好,基于html5动画渲染。 官网的demo中是写得比较全了,但很多用不到的...

kevin小当家
2015/08/07
753
0
Echarts 雷达 单击事件如何获取值

@Kener-林峰 你好,想跟你请教个问题:Echarts 雷达 单击事件如何获取值 附上本地代码:

飞舞的枫叶3841
2015/10/27
1.7K
3
echarts 基本使用

echarts官网 提供了源码和说明文档,使用echarts需要先到官网下载需要的js源文件。 官网上的demo中夹杂着很多我们用不到的东西,想使用饼状图就得从demo中把不用的去掉,劈植斩叶留下最原始的...

youfen
2019/06/04
30
0
jquery中报Uncaught TypeError: pie is not a function错误

$(function(){ var name = new Array(); var value=new Array(); var count = new Array(); $.post( "BaseAction/SheetAction/ContributeSheetPie", function(data) { name=data.name; value......

路人丁语
2015/10/19
2.4K
0

没有更多内容

加载失败,请刷新页面

加载更多

linux下java环境搭建

1、jdk下载: 官方地址:https://www.oracle.com/java/technologies/javase/javase-jdk8-downloads.html 如下图所示,我这边选择的是红框中的版本 2、压缩包上传至服务器 将下载的压缩包上传...

wc_飞豆
40分钟前
17
0
面试题:Java对象不再使用时,为什么要赋值为null?

前言 许多Java开发者都曾听说过“不使用的对象应手动赋值为null“这句话,而且好多开发者一直信奉着这句话;问其原因,大都是回答“有利于GC更早回收内存,减少内存占用”,但再往深入问就回...

码农突围
42分钟前
22
0
设计模式(5) 原型模式

原型模式 原型模式的适用场景 浅拷贝 深拷贝 用Initialize方法修改初始化状态 原型模式与之前学习的各种工厂方法、单例模式、建造者模式最大、最直观的区别在于,它是从一个既有的对象“克隆...

zhixin9001
42分钟前
7
0
获取免费的pycharm激活码网站

http://www.lookdiv.com/

云烟成雨forever
42分钟前
27
0
用Helm部署Kubernetes应用,支持多环境部署与版本回滚

1 前言 Helm是优秀的基于Kubernetes的包管理器。利用Helm,可以快速安装常用的Kubernetes应用,可以针对同一个应用快速部署多套环境,还可以实现运维人员与开发人员的职责分离。现在让我们安...

南瓜慢说
44分钟前
25
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部