用Echarts打造一个轮播图！

时间:2022-07-27
本文章向大家介绍用Echarts打造一个轮播图！，主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

最近，在B站上学习了一些Echarts的使用，分享给大家。

一个动态的柱状轮播图，本想着使用Pyecharts来实现的，奈何实现不了动态。

看来做酷炫的可视化大屏还是得上Echarts和D3。

Echarts文档地址

https://echarts.apache.org/zh/option.html

可供选择的配置超级多～

还是在Vue.js这个框架下敲代码。

首先需要安装Node.js以及NPM，然后安装Vue.js及Vue脚手架3.0。

这个在之前动态气泡图的文章中也提到过了。

# 安装Vue.js
npm install vue

# 安装Vue-cli3脚手架
npm install -g @vue/cli

命令行创建项目。

# 创建名为learn_echarts的项目
vue create learn_echarts

结果如下，选择自定义配置(第三个)。

选择Babel、Router、CSS Pre-processors及Linter / Formatter。

其中「Babel」负责JS和Vue模版语法解析，「Router」负责前端路由功能。

「CSS Pre-processors」负责样式文件的预编译，「Linter / Formatter」负责代码规范。

使用history模式来创建路由(是)，CSS预处理模式(Less)。

ESLint处理模式(标准模式)，ESLint提示(保存时)，配置文件处理(放置在独立文件夹)，是否将配置保存为预设(否)。

项目创建成功后，在项目文件夹的终端里运行如下命令。

# 运行项目
npm run serve

就可以在http://localhost:8080/访问到如下网页。

修改App.vue文件内容如下。 

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<style lang="less">
</style>

运行项目发现错误，修改eslintrc.js文件，内容如下。

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/essential',
    //'@vue/standard'
  ],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    //'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    //'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
    "space-before-function-paren": 0
  }
}

可能是因为代码里有不符合规范的空格存在...

修改router(路由)文件夹下的index.js文件。 

import Vue from 'vue'
import VueRouter from 'vue-router'
import RankPage from '../views/RankPage.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/rankpage',
    component: RankPage
  },
]

const router = new VueRouter({
  mode: 'history',
  routes
})

export default router

在components文件夹下删除HelloWorld.vue文件，添加Rank.vue文件。 

<template>
  <div class="com-container">
    <div class="com-chart" ref="rank_ref">我是rank组件</div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
};
</script>

<style lang="less" scoped></style>

在views文件夹下删除About.vue及Home.vue文件，添加RankPage.vue文件。 

<template>
  <div class="com-page">
    <rank></rank>
  </div>
</template>

<script>
import Rank from "../components/Rank";
export default {
  data() {
    return {};
  },
  components: {
    Rank,
  },
};
</script>

<style lang="less" scoped>
</style>

这样我们就可以如下地址访问到信息了，即路由创建成功。

http://localhost:8080/rankpage(页面显示我是rank组件)

这里记得设置一下全局的CSS。

在项目的src/assets路径下新建一个css文件夹，新建一个全局的global.less文件。 

html, body, #app {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

.com-page {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.com-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.com-chart {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

canvas {
    border-radius: 20px;
}
.com-container {
    position: relative;
}

最后在main.js中引入，有大小的容器，才能显示出图表。

import './assets/css/global.less'

在GitHub上下载Echarts的文件(echarts.min.js)。

# 地址
https://github.com/apache/incubator-echarts/tree/4.9.0/dist

文件下载后，放置在项目的public/static/lib目录下。

在public的index.html及main.js中进行引用。

// index.html中引入
<script src="static/lib/echarts.min.js"></script>

// main.js中引入
Vue.prototype.$echarts = window.echarts

如此便可在vue文件中使用Echarts。

修改Rank.vue文件内容如下。

<template>
  <div class="com-container">
    <div class="com-chart" ref="rank_ref"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {
    this.drawChart();
  },
  methods: {
    drawChart() {
      let myChart = this.$echarts.init(this.$refs.rank_ref);

      var option = {
        title: {
          text: "ECharts 入门示例",
        },
        tooltip: {},
        legend: {
          data: ["销量"],
        },
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>

<style lang="less" scoped></style>

通过init初始化图表对象，setOption配置图表参数。

访问网页，效果如下。

接下来就看本次的柱状轮播图是如何实现的吧！

数据采用的是昨天「NBA」在各个省份的热度(百度指数)。

坐等明天G6湖人总冠军！！！

<template>
  <div class="com-container">
    <div class="com-chart" ref="rank_ref"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      chartInstance: null,
      allData: null,
    };
  },
  mounted() {
    this.initChart();
    this.getData();
  },
  methods: {
    //初始化图表
    initChart() {
      this.chartInstance = this.$echarts.init(this.$refs.rank_ref, "dark");
      //图表初始配置
      const initOption = {
        title: {
          text: "各省热度排行",
          top: "3%",
          left: "3%",
        },
        grid: {
          top: "20%",
          left: "5%",
          right: "5%",
          bottom: "5%",
          containLabel: true,
        },
        tooltip: {
          show: true,
        },
        xAxis: {
          type: "category",
        },
        yAxis: {
          type: "value",
          splitLine: {
            //网格线
            show: false,
          },
        },
        series: [
          {
            type: "bar",
          },
        ],
      };
      this.chartInstance.setOption(initOption);
    },
    getData() {
      this.allData = [
        { name: "山东", value: 84737 },
        { name: "贵州", value: 20808 },
        { name: "江西", value: 31883 },
        { name: "重庆", value: 26070 },
        { name: "内蒙古", value: 16308 },
        { name: "湖北", value: 43956 },
        { name: "辽宁", value: 41150 },
        { name: "湖南", value: 44386 },
        { name: "福建", value: 51290 },
        { name: "上海", value: 58547 },
        { name: "北京", value: 75911 },
        { name: "广西", value: 28682 },
        { name: "广东", value: 204698 },
        { name: "四川", value: 61059 },
        { name: "云南", value: 27707 },
        { name: "江苏", value: 109264 },
        { name: "浙江", value: 115958 },
        { name: "青海", value: 3423 },
        { name: "宁夏", value: 4742 },
        { name: "河北", value: 41415 },
        { name: "黑龙江", value: 26215 },
        { name: "吉林", value: 20592 },
        { name: "天津", value: 19235 },
        { name: "陕西", value: 32019 },
        { name: "甘肃", value: 13294 },
        { name: "新疆", value: 10461 },
        { name: "河南", value: 54371 },
        { name: "安徽", value: 41701 },
        { name: "山西", value: 24752 },
        { name: "海南", value: 9279 },
        { name: "台湾", value: 587 },
        { name: "西藏", value: 1790 },
        { name: "香港", value: 1655 },
        { name: "澳门", value: 1014 },
      ];
      //排序
      this.allData.sort((a, b) => {
        return b.value - a.value;
      });
      //更新图表
      this.updateChart();
    },
    updateChart() {
      //横坐标数据(省份)
      const provinceArr = this.allData.map((item) => {
        return item.name;
      });
      //纵坐标数据(数值)
      const valueArr = this.allData.map((item) => {
        return item.value;
      });

      //更新数据
      const dataOption = {
        xAxis: {
          data: provinceArr,
        },
        series: [
          {
            data: valueArr,
          },
        ],
      };
      this.chartInstance.setOption(dataOption);
    },
  },
};
</script>

<style lang="less" scoped></style>

效果如下，广东不愧是中国篮球氛围最好的省份。

在updateChart函数中添加颜色列表，再对series里的itemStyle进行配置。

//颜色列表
const colorArr = [
    ["#0ba82c", "#4ff778"],
    ["#2e72bf", "#23e5e5"],
    ["#5052ee", "#ab6ee5"],
];

//series配置
itemStyle: {
  color: (arg) => {
    let targetArr = null;
    if (arg.data > 60000) {
      targetArr = colorArr[0];
    } else if (arg.data > 30000) {
      targetArr = colorArr[1];
    } else {
      targetArr = colorArr[2];
    }
    return new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
      {
        offset: 0,
        color: targetArr[0],
      },
      {
        offset: 1,
        color: targetArr[1],
      },
    ]);
  },
}

效果如下，渐变色图表看起来也蛮好看的。

设置动态区域缩放。 

//在data中设置全局变量startValue、endValue及定时器timeId
data() {
  return {
    chartInstance: null,
    allData: null,
    startValue: 0,
    endValue: 9,
    timeId: null,
  };
}

//区域缩放动态设置
dataZoom: {
  show: false,
  startValue: this.startValue,
  endValue: this.endValue,
}

//在methods中添加定时器
startInterval() {
  if (this.timeId) {
    clearInterval(this.timeId);
  }
  this.timeId = setInterval(() => {
    //设置循环，延时1s
    if (this.endValue > this.allData.length - 1) {
      (this.startValue = 0), (this.endValue = 9);
    }
    this.startValue++;
    this.endValue++;
    this.updateChart();
  }, 1000);
}

//在mounted函数中添加函数
mounted() {
  this.initChart();
  this.getData();
  this.startInterval();
}

效果如下，会动的图表，一下子就吸引了注意力。

就是这GIF的画质有点感人~

好了，本期分享就到此结束。

屏幕自适应，axios动态请求数据还没有实现，下期再说吧。

随机文章
WEB前端知识点必读
最近更新