在element中用Echarts异步请求获取数据生成柱状图、扇形图。

柱形图

单个数据单个柱形图：

1.单个数据单个柱形图：
2.vue前端数据：

mounted: function () {
var myChart2=echarts.init(document.getElementById(“myEchart2”))
myChart2.setOption({
tooltip: {},
toolbox: {
feature: {
dataView: {show: true, readOnly: false},
magicType: {show: true, type: [‘line’, ‘bar’]},
restore: {show: true},
saveAsImage: {show: true}
}
},
legend: {
data:[‘数量’]
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: ‘数量’,
type: ‘bar’,
data: []
}]
});
var arrayName=[]
var arrayNum=[]
myChart2.showLoading();
$.ajax({
url:window.homePath+“statistics/getNumEcharts2”，
async: true,
showBlock: false,
success: function (data)
{
if(data){
for(var i=0;i<data.data.length;i++){
arrayName.push(data.data[i].name);
arrayNum.push(data.data[i].num)
}
myChart2.hideLoading();
myChart2.setOption(
{
xAxis:{
data:arrayName
},
series: [{
// 根据名字对应到相应的系列
name: ‘数量’,
data: arrayNum
}]
})
}

    }
  })

}

3.后端数据：
只需将所要的数据已map的形式放入list中，再传递到前端就可以

单个数据多个柱形图：

1.单个数据多个柱形图：

2.vue前端数据：

mounted: function () {
var myChart1=echarts.init(document.getElementById(“myEchart1”))
$.ajax({
url:window.homePath+“statistics/getNumEcharts1”,
async: true,
showBlock: false,
success: function (data)
{
myChart1.setOption({
tooltip: {},
legend: {
},
dataset: {
dimensions: [‘year’, ‘抽查标准数量’, ‘有问题标准数量’],
source: data.data
},
xAxis: {type: ‘category’},
yAxis: {},
series: [
{type: ‘bar’},
{type: ‘bar’},
]

        })
    }
  })

}
3.后端数据：

前端的数据要和后端的相呼应

扇形图

1.前端数据

mounted: function () {
var myChart3=echarts.init(document.getElementById(“myEchart3”))
$.ajax({
url: window.homePath + “statistics/getNumEcharts3”,
async: true,
showBlock: false,
success: function (data){
myChart3.setOption({
tooltip : {
trigger: ‘item’,
formatter: “{b}
{c} : {d} %” //a 系列名称，b 数据项名称，c 数值，d 百分比
},
legend: {
type: ‘scroll’,
orient: ‘vertical’,
right: 10,
top: 20,
bottom: 20,
data: data.data.name,
selected: data.data.selected
},
series : [
{
name: ‘访问来源’,
type: ‘pie’, // 设置图表类型为饼图
radius: ‘55%’, // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
center: [‘50%’, ‘60%’],
data:data.data
}
]
})

        }

    },'json')

}
2后端数据：