88 lines
2.3 KiB
JavaScript
88 lines
2.3 KiB
JavaScript
|
function echarts_4() {
|
|||
|
|
// 基于准备好的dom，初始化echarts实例
|
|||
|
|
var myChart = echarts.init(document.getElementById('echart4'));
|
|||
|
|
|
|||
|
|
var xData = Chart4_Data.x;
|
|||
|
|
var yData = Chart4_Data.y;
|
|||
|
|
|
|||
|
|
// 指定图表的配置项和数据
|
|||
|
|
var option = {
|
|||
|
|
// title: {
|
|||
|
|
// text: '重庆市现在平均气温地区排名',
|
|||
|
|
// subtext: '数据来源：气象局'
|
|||
|
|
// },
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'axis',
|
|||
|
|
axisPointer: {
|
|||
|
|
type: 'shadow'
|
|||
|
|
},
|
|||
|
|
textStyle: { // 设置图例文字的样式
|
|||
|
|
color: '#fff' // 设置图例文字颜色为白色
|
|||
|
|
},
|
|||
|
|
formatter: function (params) {
|
|||
|
|
return params[0].name + ': ' + params[0].value + '℃';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
// grid: {
|
|||
|
|
// left: '3%',
|
|||
|
|
// right: '4%',
|
|||
|
|
// bottom: '3%',
|
|||
|
|
// containLabel: true
|
|||
|
|
// },
|
|||
|
|
grid: {
|
|||
|
|
left: '10',
|
|||
|
|
top: '30',
|
|||
|
|
right: '10',
|
|||
|
|
bottom: '10',
|
|||
|
|
containLabel: true
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
type: 'category',
|
|||
|
|
data: xData,
|
|||
|
|
axisLabel: {
|
|||
|
|
interval: 0,
|
|||
|
|
// rotate:50,
|
|||
|
|
show: true,
|
|||
|
|
splitNumber: 15,
|
|||
|
|
textStyle: {
|
|||
|
|
color: "rgba(255,255,255,.6)",
|
|||
|
|
fontSize: '12',
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
type: 'value',
|
|||
|
|
axisLabel: {
|
|||
|
|
formatter: '{value}°C' // Add the °C unit to the formatter
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
interval: 0,
|
|||
|
|
// rotate:50,
|
|||
|
|
show: true,
|
|||
|
|
splitNumber: 15,
|
|||
|
|
textStyle: {
|
|||
|
|
color: "rgba(255,255,255,.6)",
|
|||
|
|
fontSize: '12',
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: '平均气温',
|
|||
|
|
type: 'bar',
|
|||
|
|
data: yData,
|
|||
|
|
itemStyle: {
|
|||
|
|
color: '#FF6600'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 使用刚指定的配置项和数据显示图表。
|
|||
|
|
myChart.setOption(option);
|
|||
|
|
window.addEventListener("resize", function () {
|
|||
|
|
myChart.resize();
|
|||
|
|
});
|
|||
|
|
}
|