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