2020-11-13
<template>
<div>
<div id="myChart" :style="{width: '600px', height: '500px',marginTop:'50px'}"></div>
</div>
</template>
<script>
export default {
name: 'hello',
data () {
return {
msg: 'Welcome to Your Vue.js App',
tableData:[
{
a: 12,
b: 13,
c: 14,
d: 15,
},
{
a: 1232,
b: 143,
c: 144,
d: 125,
}
]
}
},
mounted(){
this.drawLine();
},
methods: {
drawLine(){
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById('myChart'))
let ft = ['三星','苹果','华为','vivo','oppo','小米']
let arr = [
{
value: [4300, 10000, 28000, 35000, 50000, 19000],
// name: '预算分配（Allocated Budget）',
name: "一次检验数/条",
tooltip:{
// show: true,
confine: true, // 悬浮控制图表内
formatter: function (params) {
var res = '';
params.value.forEach((v,i)=>{
res+=ft[i]+' '+ params.value[i]+'<br/>';
})
console.log(params.value, res);
return res;
}
}
},
{
value: [5000, 14000, 28000, 31000, 42000, 21000],
// name: '实际开销（Actual Spending）',
name: "多次检验数/条",
tooltip:{
//show: false,
// formatter: function (params) {
// console.log(params.value,'999999');
// }
}
}
];
var data = [
{ name: "一次检验数/条", value: 150 },
{ name: "多次检验数/条", value: '100%' }
];
let option = {
title: {
// text: '基础雷达图'
},
color:['#555555','#004556'],
tooltip: {},
legend: {
orient: 'vertical',
// y: 'bottom',
y: 'bottom',
left: "center",
icon: "line",
bottom:'-125',
// top: "345",
itemHeight: 13,
itemWidth: 13,
// width: 680,
// height: 280,
// itemGap: 35,
//data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）'],
data: data,
formatter: function(name) {
var total = 0;
var target;
var value;
for (let i = 0, l = data.length; i < l; i++) {
value = data[i].value;
total += data[i].value;
if (data[i].name == name) {
target = data[i].value;
}
}
var arr = ["{a|" + name + "}", "{b|" + target + "}"];
return arr
// join("\n");
},
textStyle: {
rich: {
a: {
color: "#B6B6B6",
verticalAlign: "center",
align: "center",
fontSize: 18,
padding: [0, 0, 0, 10]
},
b: {
align: "left",
fontSize: 18,
padding: [0, 0, 0, 50],
verticalAlign: "center",
//align:'center',
// lineHeight: 25,
color: "#777777"
}
}
}
},
radar: {
// shape: 'circle',
name: {
textStyle: {
color: '#fff',
backgroundColor: '#999',
borderRadius: 3,
padding: [3, 5]
}
},
// shape: 'circle',
indicator: [
{ name: '销售', max: 6500},
{ name: '管理', max: 16000},
{ name: '信息技术', max: 30000},
{ name: '客服', max: 38000},
{ name: '研发', max: 52000},
{ name: '市场', max: 25000}
]
},
series: [{
name: '预算分配2（Allocated Budget）',
type: 'radar',
// areaStyle: {},
// areaStyle: {normal: {}},
data: arr
}]
};
// 绘制图表
myChart.setOption(option);
}
}
}
</script>
