三个echarts只有一个正常显示其他两个显示不出来
$(function () {
ceshis();
ceshis1();
ceshis2();
function ceshis() {
var myChart = echarts.init(document.getElementById('chart1'));
option = {
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
top: '10%',
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
axisLabel: {
show: true,
textStyle: {
color: '#c3dbff', //更改坐标轴文字颜色
}
},
type: 'category',
data: null,
// ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: {
alignWithLabel: true
}
}
],
yAxis: [
{
axisLabel: {
show: true,
textStyle: {
color: '#c3dbff', //更改坐标轴文字颜色
}
},
type: 'value'
}
],
series: [
{
name: '直接访问',
type: 'bar',
barWidth: '60%',
data: null,
}
]
};
$(function a() {
// myChart.setOption(option); //必须要有
$.ajax({
//请求方式为get
type: "get",
//json文件位置
url: "./json/echarts1.json",
//返回数据格式为json
dataType: "json",
//请求成功完成后要执行的方法
success: function (data) {
var m1 = new Array();
var m2 = new Array();
for (var i = 0; i < data.length; i++) {
m1.push(data[i].time);
m2.push(data[i].val[0]);
}
option.xAxis.data = m1;
option.series[0].data = m2;
myChart.setOption(option, true);//刷新执行
}
});
});
}
function ceshis1() {
var color = ["#8d7fec", "#5085f2", "#e75fc3", "#f87be2", "#f2719a", "#fca4bb", "#f59a8f", "#fdb301", "#57e7ec", "#cf9ef1"]
option = {
/*backgroundColor: "rgba(255,255,255,1)",*/
color: color,
legend: {
orient: "vartical",
x: "left",
top: "center",
left: "53%",
bottom: "0%",
data: null,
itemWidth: 8,
itemHeight: 8,
textStyle: {
color: '#fff'
},
/*itemGap: 16,*/
/*formatter:function(name){
var oa = option.series[0].data;
var num = oa[0].value + oa[1].value + oa[2].value + oa[3].value+oa[4].value + oa[5].value + oa[6].value + oa[7].value+oa[8].value + oa[9].value ;
for(var i = 0; i < option.series[0].data.length; i++){
if(name==oa[i].name){
return ' '+name + ' | ' + oa[i].value + ' | ' + (oa[i].value/num * 100).toFixed(2) + '%';
}
}
}*/
formatter: function (name) {
return '' + name
}
},
series: [{
type: 'pie',
clockwise: false, //饼图的扇区是否是顺时针排布
minAngle: 2, //最小的扇区角度（0 ~ 360）
radius: ["20%", "60%"],
center: ["30%", "45%"],
avoidLabelOverlap: false,
itemStyle: { //图形样式
normal: {
borderColor: '#ffffff',
borderWidth: 1,
},
},
label: {
normal: {
show: false,
position: 'center',
formatter: '{text|{b}}\n{c} ({d}%)',
rich: {
text: {
color: "#fff",
fontSize: 14,
align: 'center',
verticalAlign: 'middle',
padding: 8
},
value: {
color: "#8693F3",
fontSize: 24,
align: 'center',
verticalAlign: 'middle',
},
}
},
emphasis: {
show: true,
textStyle: {
fontSize: 24,
}
}
},
data: null
}]
};
myChart = echarts.init(document.getElementById("chart2"));
$(function a() {
// myChart.setOption(option); //必须要有
$.ajax({
//请求方式为get
type: "post",
//json文件位置
url: "./json/echarts1.json",
//返回数据格式为json
dataType: "json",
//请求成功完成后要执行的方法
success: function (data) {
var m1 = new Array();
var m2 = new Array();
for (var i = 0; i < data.length; i++) {
m1.push(data[i]);
m2.push(data[i].name);
}
option.series[0].data = m1;
option.legend.data = m2;
myChart.setOption(option, true);//刷新执行
}
});
});
}
function ceshis2() {
var myChart = echarts.init(document.getElementById('chart3'));
var colors = ['rgb(46, 199, 201)', 'rgb(90, 177, 239)', 'rgb(255, 185, 128)'];
option = {
color: colors,
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
},
formatter: function (params) {
// 系列
let html = params[0].name + "<br>";
for (var i = 0; i < params.length; i++) {
// 获取每个系列对应的颜色值
html += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' + params[i].color + ';"></span>';
// 通过判断指定系列增加 % 符号
if (option.series[params[i].seriesIndex].type == "line") {
html += params[i].seriesName + ": " + params[i].value + "%<br>";
} else {
html += params[i].seriesName + ": " + params[i].value + "<br>";
}
}
return html;
}
},
grid: {
right: '20%'
},
toolbox: {
feature: {
dataView: {
show: true,
readOnly: false
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
legend: {
textStyle: {
color: '#fff'
},
data: ['蒸发量', '降水量', '平均温度']
},
// 缩放组件
/*dataZoom: {
type: 'slider'
},*/
xAxis: [{
type: 'category',
axisTick: {
alignWithLabel: true
},
axisLabel: {
formatter: '{value} ',
textStyle: {
color: "#ffffff" //X轴文字颜色
}
},
data: null,
//['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
}],
yAxis: [{
type: 'value',
name: '蒸发量',
min: 0,
max: 350,
position: 'right',
axisLine: {
lineStyle: {
color: colors[0]
}
},
axisLabel: {
formatter: '{value} ml'
}
},
{
type: 'value',
name: '降水量',
min: 0,
max: 350,
position: 'right',
offset: 80,
axisLine: {
lineStyle: {
color: colors[1]
}
},
axisLabel: {
formatter: '{value} ml'
}
},
{
type: 'value',
name: '温度',
min: 0,
max: 325,
position: 'left',
axisLine: {
lineStyle: {
color: colors[2]
}
},
axisLabel: {
formatter: '{value} °C'
}
}
],
series: [{
name: '蒸发量',
type: 'bar',
data: null,
//[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
itemStyle: {
normal: {
barBorderRadius: 2
}
}
},
{
barGap: '-50%', // 增加偏移量使重叠显示
name: '降水量',
type: 'bar',
yAxisIndex: 1,
data: null,
//[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
itemStyle: {
normal: {
barBorderRadius: 2
}
}
},
{
name: '平均温度',
type: 'line',
yAxisIndex: 2,
data: null,
// [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
}
]
};
$(function a() {
// myChart.setOption(option); //必须要有
$.ajax({
//请求方式为get
type: "post",
//json文件位置
url: "./json/echarts3.json",
//返回数据格式为json
dataType: "json",
//请求成功完成后要执行的方法
success: function (data) {
var m1 = new Array();
var m2 = new Array();
var m3 = new Array();
var m4 = new Array();
for (var i = 0; i < data.length; i++) {
m1.push(data[i].time);
m2.push((data[i].val).split(',')[0]);
m3.push((data[i].val).split(',')[1]);
m4.push((data[i].val).split(',')[2]);
}
option.xAxis.data = m1;
option.series[0].data = m2;
option.series[1].data = m3;
option.series[2].data = m4;
myChart.setOption(option, true);//刷新执行
}
});
});
}
});
