echarts formatter_牛X！用 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文件内容如下。

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

运行项目发现错误，修改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文件。

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

script>

<style lang="less" scoped>style>

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

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

components/Rank";
export default {
  data() {
    return {};
  },
  components: {
    Rank,
  },
};

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

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中引入

总结

以上是生活随笔为你收集整理的echarts formatter_牛X！用 Echarts 打造一个轮播图！的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。