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

最新推荐文章于 2025-09-11 20:12:36 发布

原创

最新推荐文章于 2025-09-11 20:12:36 发布 · 1.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#数据可视化 #echarts

本文介绍如何在Vue项目中使用echarts 5.0的实时排序功能，重点讲解了引入方式的变化，以及如何通过本地数据创建动态更新的柱状图。通过实例演示了如何设置图表选项和数据源，适合数据动态增长的场景。

在这里插入图片描述
*代码展示数据动态增加 *
这是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