|
|
|
@ -6,14 +6,6 @@
|
|
|
|
|
import * as echarts from "echarts";
|
|
|
|
|
export default {
|
|
|
|
|
data() {
|
|
|
|
|
let colors = ['#EE462A','#FF8929', '#FFBB00', '#5CBC69', '#00AEFF']
|
|
|
|
|
let dataSource = [
|
|
|
|
|
{ value: 48, name: 'TOP1',entprice: "苏州众汇聚合信息科技有限公司1"},
|
|
|
|
|
{ value: 36, name: 'TOP2',entprice: "苏州众司2"},
|
|
|
|
|
{ value: 30, name: 'TOP3',entprice: "苏州众汇聚合信息科技有限公司3"},
|
|
|
|
|
{ value: 22, name: 'TOP4',entprice: "苏州众汇聚合信息科技有限公司4"},
|
|
|
|
|
{ value: 16, name: 'TOP5',entprice: "苏州众汇聚合信息科技有限公司5"},
|
|
|
|
|
];
|
|
|
|
|
// 公用调整
|
|
|
|
|
let itemStyle = {
|
|
|
|
|
// normal: {
|
|
|
|
@ -28,8 +20,42 @@ export default {
|
|
|
|
|
return {
|
|
|
|
|
myChartFive: false,
|
|
|
|
|
sum: 5000,
|
|
|
|
|
dataSource:dataSource,
|
|
|
|
|
option: {
|
|
|
|
|
dataSource:[
|
|
|
|
|
{ value: 48, name: 'TOP1',entprice: "苏州众汇聚合信息科技有限公司1"},
|
|
|
|
|
{ value: 36, name: 'TOP2',entprice: "苏州众司2"},
|
|
|
|
|
{ value: 30, name: 'TOP3',entprice: "苏州众汇聚合信息科技有限公司3"},
|
|
|
|
|
{ value: 22, name: 'TOP4',entprice: "苏州众汇聚合信息科技有限公司4"},
|
|
|
|
|
{ value: 16, name: 'TOP5',entprice: "苏州众汇聚合信息科技有限公司5"},
|
|
|
|
|
],
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
mounted(){
|
|
|
|
|
this.$nextTick(()=>{
|
|
|
|
|
setTimeout(()=>{
|
|
|
|
|
this.initEchart();
|
|
|
|
|
},200)
|
|
|
|
|
})
|
|
|
|
|
window.addEventListener('resize', this.cancalDebounce);
|
|
|
|
|
},
|
|
|
|
|
beforeDestroy() {
|
|
|
|
|
window.removeEventListener('resize', this.cancalDebounce);
|
|
|
|
|
},
|
|
|
|
|
methods:{
|
|
|
|
|
cancalDebounce(){
|
|
|
|
|
window.onresize = this.myChartFive.resize();
|
|
|
|
|
},
|
|
|
|
|
initEchart(){
|
|
|
|
|
var chartDom = document.getElementById("echartsFive");
|
|
|
|
|
this.myChartFive = echarts.init(chartDom);
|
|
|
|
|
let colors = ['#EE462A','#FF8929', '#FFBB00', '#5CBC69', '#00AEFF']
|
|
|
|
|
let dataSource = [
|
|
|
|
|
{ value: 48, name: 'TOP1',entprice: "苏州众汇聚合信息科技有限公司1"},
|
|
|
|
|
{ value: 36, name: 'TOP2',entprice: "苏州众司2"},
|
|
|
|
|
{ value: 30, name: 'TOP3',entprice: "苏州众汇聚合信息科技有限公司3"},
|
|
|
|
|
{ value: 22, name: 'TOP4',entprice: "苏州众汇聚合信息科技有限公司4"},
|
|
|
|
|
{ value: 16, name: 'TOP5',entprice: "苏州众汇聚合信息科技有限公司5"},
|
|
|
|
|
];
|
|
|
|
|
let option = {
|
|
|
|
|
grid: {
|
|
|
|
|
left: '8%',
|
|
|
|
|
right: '32%',
|
|
|
|
@ -130,7 +156,7 @@ export default {
|
|
|
|
|
verticalAlign: 'middle',
|
|
|
|
|
align: 'left',
|
|
|
|
|
padding: [0, 0, 0, 20],
|
|
|
|
|
formatter: (value) => {
|
|
|
|
|
formatter: (value,index) => {
|
|
|
|
|
let name;
|
|
|
|
|
for (let index = 0; index < this.dataSource.length; index++) {
|
|
|
|
|
if(this.dataSource[index].value == value) {
|
|
|
|
@ -138,7 +164,7 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
return "{entprice|" + name + "}{value|" + value + "}{unit|%}"
|
|
|
|
|
return "{entprice|" + name + "}{entpriceValue|" + value + `}{entpriceUnit${index}|%}`
|
|
|
|
|
},
|
|
|
|
|
rich: {
|
|
|
|
|
entprice:{
|
|
|
|
@ -147,7 +173,7 @@ export default {
|
|
|
|
|
color: "#666",
|
|
|
|
|
align:"left"
|
|
|
|
|
},
|
|
|
|
|
value:{
|
|
|
|
|
entpriceValue:{
|
|
|
|
|
fontFamily: "DINCondensed",
|
|
|
|
|
fontSize: "24px",
|
|
|
|
|
color: "#0086FF",
|
|
|
|
@ -156,13 +182,49 @@ export default {
|
|
|
|
|
padding: [3,0,0,10],
|
|
|
|
|
fontStyle: "italic",
|
|
|
|
|
},
|
|
|
|
|
unit:{
|
|
|
|
|
entpriceUnit0:{
|
|
|
|
|
fontFamily: "Arial",
|
|
|
|
|
fontSize: "12px",
|
|
|
|
|
color: "#0086FF",
|
|
|
|
|
fontWeight: "bold",
|
|
|
|
|
align:"left",
|
|
|
|
|
padding: [3,0,0,5],
|
|
|
|
|
fontStyle: "italic",
|
|
|
|
|
},
|
|
|
|
|
entpriceUnit1:{
|
|
|
|
|
fontFamily: "Arial",
|
|
|
|
|
fontSize: "12px",
|
|
|
|
|
color: "#0086FF",
|
|
|
|
|
fontWeight: "bold",
|
|
|
|
|
align:"left",
|
|
|
|
|
padding: [3,0,0,5],
|
|
|
|
|
fontStyle: "italic",
|
|
|
|
|
},
|
|
|
|
|
entpriceUnit2:{
|
|
|
|
|
fontFamily: "Arial",
|
|
|
|
|
fontSize: "12px",
|
|
|
|
|
color: "#0086FF",
|
|
|
|
|
fontWeight: "bold",
|
|
|
|
|
align:"left",
|
|
|
|
|
padding: [3,0,0,-10],
|
|
|
|
|
padding: [3,0,0,5],
|
|
|
|
|
fontStyle: "italic",
|
|
|
|
|
},
|
|
|
|
|
entpriceUnit3:{
|
|
|
|
|
fontFamily: "Arial",
|
|
|
|
|
fontSize: "12px",
|
|
|
|
|
color: "#0086FF",
|
|
|
|
|
fontWeight: "bold",
|
|
|
|
|
align:"left",
|
|
|
|
|
padding: [3,0,0,5],
|
|
|
|
|
fontStyle: "italic",
|
|
|
|
|
},
|
|
|
|
|
entpriceUnit4:{
|
|
|
|
|
fontFamily: "Arial",
|
|
|
|
|
fontSize: "12px",
|
|
|
|
|
color: "#0086FF",
|
|
|
|
|
fontWeight: "bold",
|
|
|
|
|
align:"left",
|
|
|
|
|
padding: [3,0,0,5],
|
|
|
|
|
fontStyle: "italic",
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
@ -195,25 +257,7 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
mounted(){
|
|
|
|
|
this.$nextTick(()=>{
|
|
|
|
|
this.initEchart();
|
|
|
|
|
})
|
|
|
|
|
window.addEventListener('resize', this.cancalDebounce);
|
|
|
|
|
},
|
|
|
|
|
beforeDestroy() {
|
|
|
|
|
window.removeEventListener('resize', this.cancalDebounce);
|
|
|
|
|
},
|
|
|
|
|
methods:{
|
|
|
|
|
cancalDebounce(){
|
|
|
|
|
window.onresize = this.myChartFive.resize();
|
|
|
|
|
},
|
|
|
|
|
initEchart(){
|
|
|
|
|
var chartDom = document.getElementById("echartsFive");
|
|
|
|
|
this.myChartFive = echarts.init(chartDom);
|
|
|
|
|
this.myChartFive.setOption(this.option)
|
|
|
|
|
this.myChartFive.setOption(option)
|
|
|
|
|
// this.legendselectchanged(this.myChartFive)
|
|
|
|
|
},
|
|
|
|
|
// legendselectchanged(myChart){
|
|
|
|
|