这是我使用json时的代码
drawMonth(){
var app = {};
let MonthChart = this.$echarts.init(document.getElementById('MonthChart'))
let cellSize = [120, 120];
let pieRadius = 50;
let self = this;
var option;
var start = +self.$echarts.number.parseDate('2021-06-01');
var end = +self.$echarts.number.parseDate('2021-07-01');
var dayTime = 3600 * 24 * 1000;
var day = (end - start) / dayTime;
var json = [];
this.axios.get("/month6.json")
.then( function(res){
console.log(res.data);
json=res.data;
console.log(json);
if(res)
getdayinfo(day,res.data);
})
var data_arr = [];
for(var i = 0; i < json.length; i++) {
data_arr.push(json[i].data);
}
function getVirtulData() {
var date = +self.$echarts.number.parseDate('2021-06-01');
var end = +self.$echarts.number.parseDate('2021-07-01');
var dayTime = 3600 * 24 * 1000;
var data = [];
for (var time = date; time < end; time += dayTime) {
data.push([
self.$echarts.format.formatTime('yyyy-MM-dd', time),
Math.floor(Math.random() * 10000)
]);
}
return data;
}
function getPieSeries(scatterData, chart) {
return scatterData.map(function (item, index) {
var center = chart.convertToPixel('calendar', item);
return {
id: index + 'pie',
type: 'pie',
center: center,
label: {
normal: {
formatter: '{c}',
position: 'inside'
}
},
radius: pieRadius,
data: data_arr[index]
//data: [
// {name: '男性', value: Math.round(Math.random() * 24)},
// {name: '女性', value: Math.round(Math.random() * 24)}
//]
}
});
}
function getPieSeriesUpdate(scatterData, chart) {
return scatterData.map(function (item, index) {
var center = chart.convertToPixel('calendar', item);
return {
id: index + 'pie',
center: center
};
});
}
var scatterData = getVirtulData();
MonthChart.setOption({
title : {
text: '每日访问男女数量',
left: 'center'
},
tooltip : {},
legend: {
data: ['男性', '女性'],
bottom: 20
},
calendar: {
top: 'middle',
left: 'center',
orient: 'vertical',
cellSize: cellSize,
yearLabel: {
show: false,
fontSize: 30
},
dayLabel: {
margin: 20,
firstDay: 1,
nameMap: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
},
monthLabel: {
show: false
},
range: ['2021-06']
},
series: [{
id: 'label',
type: 'scatter',
coordinateSystem: 'calendar',
symbolSize: 1,
label: {
show: true,
formatter: function (params) {
return self.$echarts.format.formatTime('dd', params.value[0]);
},
offset: [-cellSize[0] / 2 + 10, -cellSize[1] / 2 + 10],
fontSize: 14
},
data: scatterData
}]
})
var pieInitialized;
function getdayinfo(day,info){
for(var i=1;i<=day;i++){
var string = {};
string="day"+i;
option.series[i-1].data=info[string]
}
}
setTimeout(function () {
pieInitialized = true;
option={
series: getPieSeries(scatterData, MonthChart)
};
console.log(option);
option && MonthChart.setOption(option);
}, 10);
app.onresize = function () {
if (pieInitialized) {
MonthChart.setOption({
series: getPieSeriesUpdate(scatterData, MonthChart)
});
}
}
}
这是我用死数据时候的效果：
一使用json数据就....
通过控制台console.log出option的值的格式是一样的
这是json文件的内容
{
"day1":[
{"name": "男性", "value":32},
{"name": "女性", "value":5}
],
"day2":[
{"name": "男性", "value":42},
{"name": "女性", "value":98}
],
"day3":[
{"name": "男性", "value":56},
{"name": "女性", "value":71}
],
"day4":[
{"name": "男性", "value":25},
{"name": "女性", "value":54}
],
"day5":[
{"name": "男性", "value":69},
{"name": "女性", "value":80}
],
"day6":[
{"name": "男性", "value":87},
{"name": "女性", "value":17}
],
"day7":[
{"name": "男性", "value":80},
{"name": "女性", "value":31}
],
"day8":[
{"name": "男性", "value":49},
{"name": "女性", "value":48}
],
"day9":[
{"name": "男性", "value":41},
{"name": "女性", "value":29}
],
"day10":[
{"name": "男性", "value":74},
{"name": "女性", "value":18}
],
"day11":[
{"name": "男性", "value":46},
{"name": "女性", "value":84}
],
"day12":[
{"name": "男性", "value":22},
{"name": "女性", "value":46}
],
"day13":[
{"name": "男性", "value":95},
{"name": "女性", "value":14}
],
"day14":[
{"name": "男性", "value":7},
{"name": "女性", "value":5}
],
"day15":[
{"name": "男性", "value":58},
{"name": "女性", "value":69}
],
"day16":[
{"name": "男性", "value":94},
{"name": "女性", "value":85}
],
"day17":[
{"name": "男性", "value":0},
{"name": "女性", "value":50}
],
"day18":[
{"name": "男性", "value":99},
{"name": "女性", "value":11}
],
"day19":[
{"name": "男性", "value":47},
{"name": "女性", "value":35}
],
"day20":[
{"name": "男性", "value":56},
{"name": "女性", "value":17}
],
"day21":[
{"name": "男性", "value":13},
{"name": "女性", "value":57}
],
"day22":[
{"name": "男性", "value":83},
{"name": "女性", "value":78}
],
"day23":[
{"name": "男性", "value":29},
{"name": "女性", "value":38}
],
"day24":[
{"name": "男性", "value":81},
{"name": "女性", "value":34}
],
"day25":[
{"name": "男性", "value":69},
{"name": "女性", "value":93}
],
"day26":[
{"name": "男性", "value":82},
{"name": "女性", "value":85}
],
"day27":[
{"name": "男性", "value":56},
{"name": "女性", "value":23}
],
"day28":[
{"name": "男性", "value":99},
{"name": "女性", "value":95}
],
"day29":[
{"name": "男性", "value":52},
{"name": "女性", "value":46}
],
"day30":[
{"name": "男性", "value":27},
{"name": "女性", "value":86}
]
}
来个大佬救救孩子吧，要被逼疯了
