fix:高echarts改动
This commit is contained in:
parent
231b306829
commit
38c84fa1e9
|
|
@ -10,17 +10,28 @@
|
|||
style="width: 850px;padding-left:10px; height: 50px;background-color: rgb(204,51,0);color:white;font-size: 30px;line-height: 50px">
|
||||
（when low carbon cement technology breakthroughs）
|
||||
</div>
|
||||
<!-- 柱状图 -->
|
||||
<div id="main" style="width: 1200px; height: 600px;border: 4px solid rgb(204,51,0)"></div>
|
||||
<!-- 折线图 155 / 205-->
|
||||
<div id="mains" style="width: 1200px;height: 600px;position: absolute;top: 205px;"></div>
|
||||
</div>
|
||||
|
||||
<div id="main" style="width: 1200px; height: 600px;border: 4px solid rgb(204,51,0)"></div>
|
||||
|
||||
<div id="mains" style="width: 1200px;height: 600px;position: absolute;top: 205px;"></div>
|
||||
<div id="main1" style="width: 1200px;height: 600px;position: absolute;top: 205px;"></div>
|
||||
<div id="main2" style="width: 1200px;height: 600px;position: absolute;top: 205px;"></div>
|
||||
</div>
|
||||
<div style="position: relative;">
|
||||
<div id="title"
|
||||
style="width: 600px;padding-left:10px; height: 50px;background-color: rgb(204,51,0);color:white;font-size: 30px;line-height: 50px">
|
||||
水泥行业碳排放强度趋势图
|
||||
</div>
|
||||
<div class="yAxisText">碳排放强度（kg CO2/吨水泥）</div>
|
||||
<div class="yearText">{{ currentYear }}</div>
|
||||
<div id="mainLine" style="width: 700px;height: 600px;border: 4px solid rgb(204,51,0);padding-left: 20px;"></div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { stack } from "d3";
|
||||
import * as echarts from "echarts";
|
||||
const updateFrequency = 2000;
|
||||
const dimension = 0;
|
||||
|
|
@ -43,9 +54,19 @@ const years = [2021, 2025, 2030, 2040, 2050, 2060];
|
|||
export default {
|
||||
name: "chart",
|
||||
data() {
|
||||
return {};
|
||||
return {
|
||||
timeInterval:null,
|
||||
currentYear: 2021,
|
||||
currentIndex: 0,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.intiLineChart();
|
||||
this.intiLine();
|
||||
this.intiBar();
|
||||
},
|
||||
methods: {
|
||||
intiBar(){
|
||||
//柱状
|
||||
var chartDom = document.getElementById("main");
|
||||
var myChart = echarts.init(chartDom);
|
||||
|
|
@ -137,11 +158,8 @@ export default {
|
|||
},
|
||||
xAxis: {
|
||||
max: "dataMax",
|
||||
// max: "13",
|
||||
// min: "0.0008",
|
||||
position: "top",
|
||||
axisLabel: {
|
||||
// show: false,
|
||||
formatter: function (n) {
|
||||
return Math.round(n) + "";
|
||||
},
|
||||
|
|
@ -159,8 +177,6 @@ export default {
|
|||
axisLabel: {
|
||||
show: true,
|
||||
fontSize: 14,
|
||||
// formatter: function (value) {
|
||||
// },
|
||||
rich: {
|
||||
flag: {
|
||||
fontSize: 25,
|
||||
|
|
@ -214,7 +230,7 @@ export default {
|
|||
],
|
||||
},
|
||||
};
|
||||
myChart.setOption(option);
|
||||
// myChart.setOption(option);
|
||||
for (let i = startIndex; i < years.length - 1; ++i) {
|
||||
(function (i) {
|
||||
setTimeout(function () {
|
||||
|
|
@ -230,6 +246,8 @@ export default {
|
|||
option.graphic.elements[0].style.text = year;
|
||||
myChart.setOption(option);
|
||||
}
|
||||
},
|
||||
intiLine(){
|
||||
//折线
|
||||
let countries = ["CementCO:Emissions"];
|
||||
let datasetWithFilters = [];
|
||||
|
|
@ -272,6 +290,7 @@ export default {
|
|||
datasetId: "dataset_CementCO:Emissions",
|
||||
showSymbol: false,
|
||||
name: "CementCO:Emissions",
|
||||
// areaStyle: {},//面性
|
||||
endLabel: {
|
||||
show: true,
|
||||
formatter: function (params) {
|
||||
|
|
@ -337,5 +356,198 @@ export default {
|
|||
};
|
||||
myCharts.setOption(options);
|
||||
},
|
||||
|
||||
intiLineChart(){
|
||||
let that = this;
|
||||
let i=0;
|
||||
let years = [2021,2025,2030,2040,2050,2060];
|
||||
that.timeInterval=setInterval(function () {
|
||||
that.currentYear = years[that.currentIndex];
|
||||
if(that.currentIndex < 6){
|
||||
that.currentIndex++;
|
||||
}else{
|
||||
that.currentYear = 2060
|
||||
}
|
||||
},1500)
|
||||
let chartLineDom = document.getElementById('mainLine');
|
||||
let myLineChart = echarts.init(chartLineDom);
|
||||
const lineItems = [
|
||||
'吨水泥碳排放',
|
||||
'碳捕集',
|
||||
'清洁能源电力',
|
||||
'能效提升',
|
||||
'替代燃料',
|
||||
'低碳水泥'
|
||||
];
|
||||
let colors= ['rgb(43,140,190)', 'rgb(78,179,211)', 'rgb(123,204,196)', 'rgb(204,235,197)', 'rgb(224,243,219)', 'rgb(247,252,240)'];
|
||||
let datasetWithFilters = [],seriesList =[];
|
||||
lineItems.forEach((item,index) => {
|
||||
var datasetId = 'dataset_' + item;
|
||||
datasetWithFilters.push({
|
||||
id: datasetId,
|
||||
fromDatasetId: 'dataset_raw',
|
||||
transform: {
|
||||
type: 'filter',
|
||||
config: {
|
||||
and: [
|
||||
{ dimension: 'Year', gte: 2020 },
|
||||
{ dimension: 'Country', '=': item }
|
||||
]
|
||||
}
|
||||
}
|
||||
})
|
||||
seriesList.push({
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
datasetId: datasetId,
|
||||
showSymbol: false,
|
||||
name: item,
|
||||
areaStyle: {
|
||||
color:colors[index]
|
||||
},
|
||||
lineStyle:{
|
||||
color:colors[index]
|
||||
},
|
||||
// endLabel: {
|
||||
// show: true,
|
||||
// formatter: function (params) {
|
||||
// return params.value[3] + ': ' + params.value[0];
|
||||
// }
|
||||
// },
|
||||
labelLayout: {
|
||||
moveOverlap: 'shiftY'
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
encode: {
|
||||
x: 'Year',
|
||||
y: 'Income',
|
||||
label: ['Country', 'Income'],
|
||||
itemName: 'Year',
|
||||
tooltip: ['Income']
|
||||
},
|
||||
});
|
||||
})
|
||||
let _rawData = [
|
||||
["Income", "Country", "Year"],
|
||||
[573, "吨水泥碳排放", 2021],
|
||||
[550, "吨水泥碳排放", 2025],
|
||||
[520, "吨水泥碳排放", 2030],
|
||||
[420, "吨水泥碳排放", 2040],
|
||||
[296, "吨水泥碳排放", 2050],
|
||||
[31, "吨水泥碳排放", 2060],
|
||||
[0, "碳捕集", 2021],
|
||||
[6, "碳捕集", 2025],
|
||||
[10, "碳捕集", 2030],
|
||||
[27, "碳捕集", 2040],
|
||||
[79, "碳捕集", 2050],
|
||||
[260, "碳捕集", 2060],
|
||||
[0, "清洁能源电力", 2021],
|
||||
[1, "清洁能源电力", 2025],
|
||||
[4, "清洁能源电力", 2030],
|
||||
[10, "清洁能源电力", 2040],
|
||||
[15, "清洁能源电力", 2050],
|
||||
[20, "清洁能源电力", 2060],
|
||||
[0, "能效提升", 2021],
|
||||
[6, "能效提升", 2025],
|
||||
[15, "能效提升", 2030],
|
||||
[15, "能效提升", 2040],
|
||||
[15, "能效提升", 2050],
|
||||
[15, "能效提升", 2060],
|
||||
[0, "替代燃料", 2021],
|
||||
[18, "替代燃料", 2025],
|
||||
[32, "替代燃料", 2030],
|
||||
[72, "替代燃料", 2040],
|
||||
[90, "替代燃料", 2050],
|
||||
[163, "替代燃料", 2060],
|
||||
[0, "低碳水泥", 2021],
|
||||
[5, "低碳水泥", 2025],
|
||||
[10, "低碳水泥", 2030],
|
||||
[50, "低碳水泥", 2040],
|
||||
[100, "低碳水泥", 2050],
|
||||
[105, "低碳水泥", 2060],
|
||||
];
|
||||
let lineOptions = {
|
||||
color:colors,
|
||||
animationDuration: 10000,
|
||||
legend:{
|
||||
// type: 'plain',
|
||||
icon:'rect',
|
||||
top:'95%'
|
||||
|
||||
},
|
||||
dataset: [
|
||||
{
|
||||
id: "dataset_raw",
|
||||
source: _rawData,
|
||||
},
|
||||
...datasetWithFilters,
|
||||
],
|
||||
tooltip: {
|
||||
order: 'valueDesc',
|
||||
trigger: 'axis'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
nameLocation: 'middle',
|
||||
boundaryGap: false,
|
||||
},
|
||||
yAxis: {
|
||||
max: '600', //取最大值为最大刻度
|
||||
// name: '碳排放强度（kg CO2/吨水泥）'
|
||||
},
|
||||
|
||||
// graphic: {
|
||||
// elements: [
|
||||
// {
|
||||
// type: "text",
|
||||
// left: "center",
|
||||
// bottom: 60,
|
||||
// style: {
|
||||
// text: startYear,
|
||||
// font: "bolder 80px monospace",
|
||||
// fill: "#d6000f",
|
||||
// },
|
||||
// z: 100,
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
series: seriesList
|
||||
}
|
||||
myLineChart.setOption(lineOptions);
|
||||
// for (let i = startIndex; i < years.length - 1; ++i) {
|
||||
// (function (i) {
|
||||
// setTimeout(function () {
|
||||
// updateYear(years[i + 1]);
|
||||
// }, (i - startIndex) * updateFrequency);
|
||||
// })(i);
|
||||
// }
|
||||
// function updateYear(year) {
|
||||
// lineOptions.graphic.elements[0].style.text = year;
|
||||
// myLineChart.setOption(lineOptions);
|
||||
// }
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.yAxisText{
|
||||
position: absolute;
|
||||
left: -78px;
|
||||
top: 295px;
|
||||
transform: rotateZ(-90deg);
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
}
|
||||
.yearText{
|
||||
position: absolute;
|
||||
left: 286px;
|
||||
bottom: 100px;
|
||||
color: red;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
z-index: 9999;
|
||||
font-size: 50px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue