zhangzhang
1 year ago
8 changed files with 631 additions and 521 deletions
@ -1,203 +1,225 @@ |
|||
|
|||
import * as echarts from "echarts"; |
|||
let color = ['#4278F8F9', 'transparent','#5372C4F9', 'transparent', '#0046FFF9', 'transparent','#FB9434F9', 'transparent','#854101F9', 'transparent', '#05E599F9', 'transparent','#219F73F9', 'transparent','#7CEDD5F9', 'transparent',]; |
|||
let colorend = ['#4278F800', 'transparent', '#5372C400', 'transparent','#0046FF00', 'transparent', '#FB943400', 'transparent','#85410100', 'transparent','#05E59900', 'transparent','#219F7300', 'transparent','#7CEDD500', 'transparent',]; |
|||
let color = [ |
|||
"#4278F8F9", |
|||
"#5372C4F9", |
|||
"#0046FFF9", |
|||
"#FB9434F9", |
|||
"#854101F9", |
|||
"#05E599F9", |
|||
"#219F73F9", |
|||
"#7CEDD5F9", |
|||
]; |
|||
let colorend = [ |
|||
"#4278F800", |
|||
"#5372C400", |
|||
"#0046FF00", |
|||
"#FB943400", |
|||
"#85410100", |
|||
"#05E59900", |
|||
"#219F7300", |
|||
"#7CEDD500", |
|||
]; |
|||
const datas = [ |
|||
{ |
|||
name: '客1', |
|||
name: "客1", |
|||
// num:''
|
|||
value: 13456, |
|||
}, |
|||
{ |
|||
name: '客2', |
|||
name: "客2", |
|||
value: 13456, |
|||
}, |
|||
{ |
|||
name: '客3', |
|||
name: "客3", |
|||
value: 13456, |
|||
}, |
|||
{ |
|||
name: '专1', |
|||
name: "专1", |
|||
// num:''
|
|||
value: 13456, |
|||
}, |
|||
{ |
|||
name: '专2', |
|||
name: "专2", |
|||
value: 13456, |
|||
}, |
|||
{ |
|||
name: '专3', |
|||
name: "专3", |
|||
value: 13456, |
|||
}, |
|||
{ |
|||
name: '货1', |
|||
name: "货1", |
|||
value: 13456, |
|||
}, |
|||
{ |
|||
name: '货2', |
|||
name: "货2", |
|||
value: 13456, |
|||
}, |
|||
]; |
|||
]; |
|||
|
|||
let sum = 0; |
|||
let sum = 0; |
|||
for (var i of datas) { |
|||
sum += i.value; |
|||
} |
|||
|
|||
var options = { |
|||
tooltip: { |
|||
show:true, |
|||
trigger: 'item', |
|||
formatter: '{a} <br/>{b}: {c} ({d}%)', |
|||
backgroundColor:"#ffffff", |
|||
textStyle:{ |
|||
color:"#666" |
|||
} |
|||
show: true, |
|||
// trigger: "item",
|
|||
// formatter: "{a} <br/>{b}: {c} ({d}%)",
|
|||
// backgroundColor: "#ffffff",
|
|||
// textStyle: {
|
|||
// color: "#666",
|
|||
// },
|
|||
}, |
|||
legend: { |
|||
orient: 'vertical', |
|||
orient: "vertical", |
|||
right: 40, |
|||
top:50, |
|||
formatter:(name)=>{ |
|||
let res = datas.filter(v => v.name === name); |
|||
let str = '' |
|||
str = '{name1|' + res[0].name + '}{name2|' + res[0].value + '}辆'+ '{name2|' + res[0].value/sum * 100 + '}%' |
|||
return str |
|||
}, |
|||
icon: 'circle', |
|||
itemWidth:10, |
|||
itemHeight:10, |
|||
top: 50, |
|||
formatter: (name) => { |
|||
let res = datas.filter((v) => v.name === name); |
|||
let str = ""; |
|||
str = |
|||
"{name1|" + |
|||
res[0].name + |
|||
"}{name2|" + |
|||
res[0].value + |
|||
"}辆" + |
|||
"{name2|" + |
|||
(res[0].value / sum) * 100 + |
|||
"}%"; |
|||
return str; |
|||
}, |
|||
icon: "circle", |
|||
itemWidth: 10, |
|||
itemHeight: 10, |
|||
itemGap: 20, |
|||
borderRadius:50, |
|||
itemStyle:{ |
|||
|
|||
}, |
|||
textStyle:{ |
|||
rich:{ |
|||
borderRadius: 50, |
|||
itemStyle: {}, |
|||
textStyle: { |
|||
rich: { |
|||
background: { |
|||
background: '#DEDEDE', |
|||
background: "#DEDEDE", |
|||
fontSize: 14, |
|||
align: 'left', |
|||
align: "left", |
|||
padding: [0, 10, 20, 0], |
|||
}, |
|||
name1: { |
|||
color: '#fff', |
|||
color: "#fff", |
|||
fontSize: 14, |
|||
Width: 12, |
|||
align: 'left', |
|||
align: "left", |
|||
padding: [0, 0, 0, 10], |
|||
}, |
|||
name2: { |
|||
color: '#37E7FF', |
|||
color: "#37E7FF", |
|||
fontSize: 14, |
|||
align: 'left', |
|||
align: "left", |
|||
padding: [0, 0, 0, 10], |
|||
}, |
|||
value: { |
|||
color: '#ccc', |
|||
color: "#ccc", |
|||
fontSize: 14, |
|||
align: 'left', |
|||
align: "left", |
|||
}, |
|||
title: { |
|||
// color: '#fff',
|
|||
color: "#C60020", |
|||
fontWeight:'bold', |
|||
fontWeight: "bold", |
|||
fontSize: 40, |
|||
} |
|||
}, |
|||
color:"#fff", |
|||
}, |
|||
color: "#fff", |
|||
}, |
|||
data: [ |
|||
{ |
|||
name:'客1', |
|||
backgroundColor:'#5CC5FF', |
|||
}, '客2', '客3', '货1', |
|||
'货2', '专1', '专2', '专3'] |
|||
name: "客1", |
|||
backgroundColor: "#5CC5FF", |
|||
}, |
|||
"客2", |
|||
"客3", |
|||
"货1", |
|||
"货2", |
|||
"专1", |
|||
"专2", |
|||
"专3", |
|||
], |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: '', |
|||
type: 'pie', |
|||
selectedMode: 'single', |
|||
radius: [0, '50%'], |
|||
center:['25%','50%'], |
|||
name: "", |
|||
type: "pie", |
|||
selectedMode: "single", |
|||
radius: [0, "50%"], |
|||
center: ["25%", "50%"], |
|||
label: { |
|||
normal: { |
|||
position: 'inner', |
|||
position: "inner", |
|||
show: true, |
|||
color:'#fff', |
|||
fontSize:14, |
|||
formatter: '{b}\n{c}辆', |
|||
} |
|||
color: "#fff", |
|||
fontSize: 14, |
|||
formatter: "{b}\n{c}辆", |
|||
}, |
|||
}, |
|||
data: [ |
|||
{value: 2290, name: '客车\n'}, |
|||
{value: 1020, name: '货车\n'}, |
|||
{value: 3000, name: '专项车\n'}, |
|||
{ value: 2290, name: "客车\n" }, |
|||
{ value: 1020, name: "货车\n" }, |
|||
{ value: 3000, name: "专项车\n" }, |
|||
], |
|||
color:['#708FFF','#FB9434','#219F73'] |
|||
color: ["#708FFF", "#FB9434", "#219F73"], |
|||
}, |
|||
{ |
|||
name: '', |
|||
type: 'pie', |
|||
radius: ['60%', '70%'], |
|||
center:['25%','50%'], |
|||
name: "", |
|||
type: "pie", |
|||
radius: ["60%", "70%"], |
|||
center: ["25%", "50%"], |
|||
label: { |
|||
position: 'inner', |
|||
show: false |
|||
position: "inner", |
|||
show: false, |
|||
}, |
|||
data: [ |
|||
{value: 13456, name: '客1'}, |
|||
{value: 2000, name: ''}, |
|||
{value: 13456, name: '客2'}, |
|||
{value: 2000, name: ''}, |
|||
{value: 13456, name: '客3'}, |
|||
{value: 2000, name: ''}, |
|||
{value: 13456, name: '货1'}, |
|||
{value: 2000, name: ''}, |
|||
{value: 13456, name: '货2'}, |
|||
{value: 2000, name: ''}, |
|||
{value: 13456, name: '专1'}, |
|||
{value: 2000, name: ''}, |
|||
{value: 13456, name: '专2'}, |
|||
{value: 2000, name: ''}, |
|||
{value: 13456, name: '专3'}, |
|||
{value: 2000, name: ''}, |
|||
{ value: 13456, name: "客1" }, |
|||
{ value: 13456, name: "客2" }, |
|||
{ value: 13456, name: "客3" }, |
|||
{ value: 13456, name: "货1" }, |
|||
{ value: 13456, name: "货2" }, |
|||
{ value: 13456, name: "专1" }, |
|||
{ value: 13456, name: "专2" }, |
|||
{ value: 13456, name: "专3" }, |
|||
], |
|||
itemStyle: { |
|||
normal: { |
|||
borderRadius: "5", |
|||
borderWidth:0, |
|||
borderType:"solid", |
|||
borderCap:"round", |
|||
borderJoin:"round", |
|||
borderColor:"#064258", |
|||
borderMiterLimit:"20", |
|||
color: function(params) { |
|||
borderWidth: 2, |
|||
borderType: "solid", |
|||
borderCap: "round", |
|||
borderJoin: "round", |
|||
borderColor: "#064258", |
|||
borderMiterLimit: "20", |
|||
color: function (params) { |
|||
return { |
|||
type: 'linear', |
|||
type: "linear", |
|||
x: 0, |
|||
y: 0, |
|||
x2: 1, |
|||
y2: 1, |
|||
colorStops: [{ |
|||
colorStops: [ |
|||
{ |
|||
offset: 0, |
|||
color: color[params.dataIndex] // 0% 处的颜色
|
|||
color: color[params.dataIndex], // 0% 处的颜色
|
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: colorend[params.dataIndex] // 100% 处的颜色
|
|||
} |
|||
color: colorend[params.dataIndex], // 100% 处的颜色
|
|||
}, |
|||
], |
|||
globalCoord: false // 缺省为 false
|
|||
} |
|||
} |
|||
globalCoord: false, // 缺省为 false
|
|||
}; |
|||
}, |
|||
}, |
|||
color:['#009688','#63BA79','#FFB800','#F7ED46','#666666'] |
|||
} |
|||
] |
|||
} |
|||
|
|||
}, |
|||
// color: ["#009688", "#63BA79", "#FFB800", "#F7ED46", "#666666"],
|
|||
}, |
|||
], |
|||
}; |
|||
|
|||
export default options; |
|||
|
|||
Loading…
Reference in new issue