echarts5.0 动态柱状图 不用调接口 不用jQuery舒适应用

*代码展示 数据动态增加 *
这是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};