echarts分享(一):项目基础

前言

产生写关于echarts系列文章的想法源于目前正在做的项目，一个纯图表的可视化看板项目，足足有七八个不同的页面。当接到项目任务的时候，我瞬间裂开了！！！我想起了抖音上看到的一个视频：

“会写字吗?” “会”

“会写作文吗?” “会”

“好的，这本书下个月要出版” “我。。。”

我之前只是打酱油参与过一个图表类的项目，对于配置项的还算是熟悉一些，但是这次的项目难度和当时的项目根本不是一个level好吧。再加上另一个同事完全不会echarts，所以项目开发就成了个人的solo，唉！说多了都是泪啊。。。

好了，不扯了。第一篇主要分享对于echarts的基础使用，不过官方文档上也有，介绍的明明白白，清清楚楚，有基础的xdm可以直接略过。

项目基础

初始化Vue项目

vue/cli3版本以上创建vue项目命令和vue/cli2版本的时候有所不同。

创建时候可以自由选择的配置项，这里仅为了演示效果，配置了路由和scss。

vue create echarts-example
// 以下为项目配置，个人习惯不定
// 路由管理vue-router
// css预处理器 scss

引入依赖插件

除了引入echarts图表依赖以外，还引入了normalize.css这个依赖，用于对页面元素的css属性进行初始化(从花裤衩大佬的vue-element-admin项目中发现的，灰常好用！！！大神666)

// 图表 echrts
npm i echarts -S
// css初始化   normalize.css
npm i  normailze.css -S

对插件进行封装处理

Vue项目中将echatrs挂载到Vue原型属性上，便于在页面和组件中使用。

注意点：

个人也不是很确定，只是在查资料时候发现的。

• 之前版本对于echarts的引入方式: import echarts from ‘echarts’
• 项目所用版本为5.2.2，引入方式： import * as echarts from ‘echarts’

// main.js
import Vue from "vue";

import 'normalize.css/normalize.css'

import App from "./App.vue";
import router from "./router";

import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts

完成一个基础图表

以折线图为例。（数据来源于官网实例）

结果如下：

// html
<template>
  <div class="contaniner">
    <div class="line" ref="lineRef"></div>
  </div>
</template>
// js
<script>
export default {
  name: "Home",
  data() {
    return {
      myChart: null
    }
  },
  mounted(){
    this.initLine()
  },
  methods: {
    initLine() {
      this.myChart = this.$echarts.init(this.$refs.lineRef);
      const option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'line',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };
      this.myChart.setOption(option)
    }
  },
};
</script>
// css
<style lang="scss" scoped>
.contaniner{
  width:100%;
  height: 100%;
  .line{
    width:600px;
    margin: 0 auto;
    height: 400px;
  }
}
</style>