*代码展示 数据动态增加 *
这是echarts5.0的新增的图表 主要的动态排序属性是 series 里的 realtimeSort: true, 所以 很重要的一点事在项目引入的时候 必须 引入echarts5 npm i echarts@5.0.2 这很重要
在main.js引入 **注意 ** 引入的话 要这样写 和echarts4 不一样 很关键
//引入echarts
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts
在echarts官网 他是通过jquery调取线上接口的 我这边做的是吧数据放在本地 下面是代码展示
<template>
<div class="cars-data-groupper">
<div class="top">
<div id="container" style="height:700px ;width:100%;"></div>
</div>
</template>
<script>
import echartsData from './data.js'
export default {
name: '',
data() {
return {};
},
mounted() {
this.getCharts();
},
methods: {
getCharts() {
var chartDom = document.getElementById('container');
var myChart = this.$echarts.init(chartDom);
var option;
var updateFrequency = 2000;
var dimension = 0;
var countryColors = {
中国: '#FF5E4F',
加拿大: '#45AD94',
日本: '#4D57FF',
西班牙: '#969498',
俄罗斯: '#45ACEC',
法国: '#A7AA62',
意大利: '#EC9795',
印度: '#DE9E75',
墨西哥: '#C49E60',
美国: '#47984B',
英国: '#DD9CD1',
澳大利亚: '#92B668',
韩国: '#B2A6EC',
巴西: '#44AFBD',
德国: '#89ADF1'
};
var data = echartsData.dats;
var flags = echartsData.fonts;
var years = [];
for (var i = 0; i < data.length; ++i) {
if (years.length === 0 || years[years.length - 1] !== data[i][4]) {
years.push(data[i][4]);
}
}
function getFlag(countryName) {
if (!countryName) {
return '';
}
return (
flags.find(function(item) {
return item.name === countryName;
}) || {}
).emoji;
}
var startIndex = 1;
var startYear = years[startIndex];
var option = {
title: {
left: 'center',
text: '2005-2020全球汽车销量总榜',
textStyle: {
fontSize: 30,
"color": "#ffffff"
}
},
grid: {
top: 50,
bottom: 30,
left: 150,
right: 150
},
xAxis: {
max: 'dataMax',
label: {
formatter: function(n) {
return Math.round(n);
}
},
axisLine:{
lineStyle:{
color:'#ffffff',
}
},
},
dataset: {
source: data.slice(1).filter(function(d) {
return d[4] === startYear;
})
},
yAxis: {
type: 'category',
inverse: true,
max: 14,
axisLine:{
lineStyle:{
color:'#ffffff',
}
},
axisLabel: {
show: true,
textStyle: {
fontSize: 15,
},
formatter: function(value) {
return value + '{flag|' + getFlag(value) + '}';
},
rich: {
flag: {
fontSize: 25,
padding: 5,
align: 'center'
}
}
},
animationDuration: 300,
animationDurationUpdate: 300
},
series: [
{
realtimeSort: true,
seriesLayoutBy: 'column',
type: 'bar',
itemStyle: {
color: function(param) {
return countryColors[param.value[3]] || '#5470c6';
}
},
encode: {
x: dimension,
y: 3
},
label: {
formatter: function(value) {
return Math.ceil(value.value[0]) + '辆';
},
textStyle: {
fontSize: 16,
color:'#fff',
},
show: true,
precision: 1,
position: 'right',
valueAnimation: true,
}
}
],
// Disable init animation.
animationDuration: 0,
animationDurationUpdate: updateFrequency,
animationEasing: 'linear',
animationEasingUpdate: 'linear',
graphic: {
elements: [
{
type: 'text',
right: 160,
bottom: 60,
style: {
text: startYear,
font: 'bolder 80px monospace',
fill: '#fff'
},
z: 100
}
]
}
};
// console.log(option);
myChart.setOption(option);
for (var i = startIndex; i < years.length - 1; ++i) {
(function(i) {
setTimeout(function() {
updateYear(years[i + 1]);
}, (i - startIndex) * updateFrequency);
})(i);
}
function updateYear(year) {
var source = data.slice(1).filter(function(d) {
return d[4] === year;
});
option.series[0].data = source;
option.graphic.elements[0].style.text = year;
myChart.setOption(option);
}
option && myChart.setOption(option);
}
}
};
</script>
<style lang="less">
.cars-data-groupper {
.top {
margin: 0 auto 20px;
padding-top: 25px;
font-size: 30px;
text-align: center;
.img-logo {
vertical-align: middle;
width: 50px;
height: 50px;
}
}
}
</style>
下面是我自己定义的数据 大家自己可以修改
var dats = [
["Income", "Life Expectancy", "Population", "Country", "Year"],
[5758189, 68.8378, 8417640, "中国", 2005],
[1630142, 68.519, 14099994, "加拿大", 2005],
[5852034, 40.936264, 558820362, "日本", 2005],
[1959488, 60.18618, 6051290, "西班牙", 2005],
[1806625, 65.5708, 4049689, "俄罗斯", 2005],
[2598183, 66.3308, 42071027, "法国", 2005],
[2495436, 67.18742266, 70111671, "意大利", 2005],
[1440455, 71.0438, 144928, "印度", 2005],
[1168508, 34.95868, 382231042, "墨西哥", 2005],
[17444329, 23.12128, 10248496, "美国", 2005],
[2828127, 40.88998, 19304737, "英国", 2005],
[988269, 69.2654, 1947802, "澳大利亚", 2005],
[1145230, 59.7336, 25264029, "韩国", 2005],
[1714644, 57.5768, 104306354, "巴西", 2005],
[3614886, 68.0836, 159880756, "德国", 2005],
[5758189, 68.8378, 8417640, "中国", 2006],
[1630142, 68.519, 14099994, "加拿大", 2006],
[5852034, 40.936264, 558820362, "日本", 2006],
[1959488, 60.18618, 6051290, "西班牙", 2006],
[1806625, 65.5708, 4049689, "俄罗斯", 2006],
[2598183, 66.3308, 42071027, "法国", 2006],
[2495436, 67.18742266, 70111671, "意大利", 2006],
[1440455, 71.0438, 144928, "印度", 2006],
[1168508, 34.95868, 382231042, "墨西哥", 2006],
[17444329, 23.12128, 10248496, "美国", 2006],
[2828127, 40.88998, 19304737, "英国", 2006],
[988269, 69.2654, 1947802, "澳大利亚", 2006],
[1145230, 59.7336, 25264029, "韩国", 2006],
[1714644, 57.5768, 104306354, "巴西", 2006],
[3614886, 68.0836, 159880756, "德国", 2006],
[8802549, 69.8254, 8821938, "中国", 2007],
[1690030, 69.097, 14882050, "加拿大", 2007],
[5304953, 42.809992, 580886559, "日本", 2007],
[1928507, 61.46974, 6304524, "西班牙", 2007],
[2904100, 66.5044, 4142353, "俄罗斯", 2007],
[2628917, 67.5644, 42724452, "法国", 2007],
[2770528, 67.82125638, 70720721, "意大利", 2007],
[1993522, 72.3034, 150779, "印度", 2007],
[1149377, 36.30024, 395137696, "墨西哥", 2007],
[16404794, 27.87104, 9957244, "美国", 2007],
[2793737, 45.41514, 19979069, "英国", 2007],
[1049274, 70.3522, 2040015, "澳大利亚", 2007],
[1278015, 62.0038, 26236679, "韩国", 2007],
[2469420, 58.7624, 107729541, "巴西", 2007],
[3481208, 68.6448, 164941716, "德国", 2007],
];
var fonts = [
{ emoji: "🇨🇳", name: "中国" },
{ emoji: "🇨🇦", name: "加拿大" },
{ emoji: "🇯🇵", name: "日本" },
{ emoji: "🇪🇸", name: "西班牙" },
{ emoji: "🇷🇺", name: "俄罗斯" },
{ emoji: "🇫🇷", name: "法国" },
{ emoji: "🇮🇹", name: "意大利" },
{ emoji: "🇮🇳", name: "印度" },
{ emoji: "🇲🇽", name: "墨西哥" },
{ emoji: "🇺🇸", name: "美国" },
{ emoji: "🇬🇧", name: "英国" },
{ emoji: "🇦🇺", name: "澳大利亚" },
{ emoji: "🇰🇷", name: "韩国" },
{ emoji: "🇧🇷", name: "巴西" },
{ emoji: "🇩🇪", name: "德国" },
];
module.exports = {dats,fonts};