1.静态数据可以显示饼图
2.动态获取数据后是键值对形式,不知道怎么和series的data对应起来,形成动态生成的
html就是定义了一个容器
response.data是这样的:
[{"0":"B银行"},{"1":"华夏银行"},{"3":"中国银行"},{"4":"农行"}]
<script>
import axios from 'axios'
import echarts from 'echarts'
export default {
name: 'hello',
data () {
return {
msg: 'evaluation'
}
},
mounted(){
this.drawLine();
},
methods: {
drawLine(){
// 基于准备好的dom,初始化echarts实例
let myChart = this.$echarts.init(document.getElementById('map'))
let myPie = this.$echarts.init(document.getElementById('pie'))
let _this = this
// 绘制饼图
myChart.setOption({
title : {
text: '被评价次数分布情况',
// subtext: '纯属虚构',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: ['华夏银行','农业银行','招商银行']
},
series : [
// {
// name: '评价次数',
// type: 'pie',
// radius : '55%',
// center: ['50%', '60%'],
// data:[
// {value:"1", name:'华夏银行'},{value:"4", name:'农业银行'},{value:"3", name:'招商银行'}
// ],
// itemStyle: {
// emphasis: {
// shadowBlur: 10,
// shadowOffsetX: 0,
// shadowColor: 'rgba(0, 0, 0, 0.5)'
// }
// }
// }
]
});
// _this.axios.post("/api/bank-lzg/oprtion/oprtionByAssess.do")
axios({
method: 'get',
url: '/api/bank-lzg/oprtion/oprtionByAssess.do'
})
.then(function(response) {
console.log(response.data[0])
myChart.setOption({
series:[
{
name: '评价次数',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
//response.data[0]
//这里不知道怎么写
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
})
})
.catch(function(error) {
console.log(error);
})
// 绘制柱形图
myPie.setOption({
title: {
text: '分数分布情况'
},
tooltip : {},
legend: {
data:['银行个数']
},
xAxis: {
data: ["60分以下","60分到80分之间","80分以上"]
},
yAxis: {},
series : [
{
name: '银行个数',
type: 'bar',
data: [0, 1, 1]
}
]
});
}
}
}
</script>
在series的
这样就好了