可视化|数据可视化文档之 echarts 项目初始化

数据可视化文档之 echarts 项目初始化

环境搭建

# node 环境
nvm install v11.15.0
# or
nvm use 11.15.0

# 查看 node 版本
node -V
# v11.15.0

npm -V
# 6.7.0

cnpm -V
# [email protected]



# 更改镜像
# npm config set registry https://registry.npmmirror.com
nrm use taobao
npm config get registry



# 全局安装 @vue/cli
npm i -g @vue/[email protected]
# cnpm i -g @vue/cli

vue --version
# vue -V
# @vue/cli 4.3.1



vue create datev-report-dev # 数据报表项目开发
# 选择手动 Manually
#   Babel
#   Router
#   CSS-Pre-processors
#   Linter/Formatter
#   history 模式 no
#   Sass/SCSS(with node-sass)
#   ESLint+Standard config
#   Lint on save
#   将所有的配置文件输出到特定的文件dedicated config files.
# 进入项目初始化，得到全新的项目
#   如果报错是因为网络慢，要用淘宝镜像。



# or

# 使用淘宝镜像 来创建 vue 项目
vue create 项目名称 --registry=淘宝镜像地址

1) element-ui 引入

vue add element
# no，按需引入，选择中文

2) echarts 引入

npm i -S echarts

一、使用 vue-echarts 插件

1.1 安装

npm install echarts vue-echarts -S

1.2 CDN

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

1.3 注册

plugins/vuecharts.js

import Vue from "vue";
import VueECharts from "vue-echarts"; // refers to components/ECharts.vue in webpack

// import ECharts modules manually to reduce bundle size
import "echarts/lib/chart/bar";
import "echarts/lib/component/tooltip";

// If you want to use ECharts extensions, just import the extension package and it will work
// Taking ECharts-GL as an example:
// You only need to install the package with `npm install --save echarts-gl` and import it as follows
import "echarts-gl";

// register component to use
Vue.component("v-chart", VueECharts);

1.4 注册文件 plugins/vuecharts 引入到 main.js

main.js

import "./plugins/vuecharts";

1.5 使用 v-chart 组件渲染，我们动态改变 options 参数的值 来进行动态渲染，非常便利。

• 使用 v-echarts 组件，传入 options
• 编写 data 的样式，options 与 ECharts 中的 setOptions 中的参数是一致的
• 设置 宽高 100%

<template>
  <v-chart :options="polar" />
  <!-- <v-chart :options="data1" /> -->
</template>

<script>
  import ECharts from "vue-echarts";
  import "echarts/lib/chart/line";
  import "echarts/lib/component/polar";

  export default {
    components: {
      "v-chart": ECharts,
    },
    data() {
      let data = [];

      for (let i = 0; i <= 360; i++) {
        let t = (i / 180) * Math.PI;
        let r = Math.sin(2 * t) * Math.cos(2 * t);
        data.push([r, i]);
      }

      return {
        data1: {
          xAxis: {
            type: "category",
          },
          yAxis: {},
          series: [
            {
              type: "line",
              data: [100, 200, 300],
            },
          ],
        },
        polar: {
          title: {
            text: "极坐标双数值轴",
          },
          legend: {
            data: ["line"],
          },
          polar: {
            center: ["50%", "54%"],
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
            },
          },
          angleAxis: {
            type: "value",
            startAngle: 0,
          },
          radiusAxis: {
            min: 0,
          },
          series: [
            {
              coordinateSystem: "polar",
              name: "line",
              type: "line",
              showSymbol: false,
              data: data,
            },
          ],
          animationDuration: 2000,
        },
      };
    },
  };
</script>

<style>
  /**
 * The default size is 600px×400px, for responsive charts
 * you may need to set percentage values as follows (also
 * don't forget to provide a size for the container).
 */
  .echarts {
    width: 100%;
    height: 100%;
  }
</style>

二、使用 v-charts 插件

应用场景：

1. v-charts 是基于 Vue 2.x 和 ECharts 的图形库(Chart components based on Vue2.x and Echarts)
2. 繁琐的数据类型转化、修改复杂的靶置项
3. 快速生成 echarts，不需要过多的修改样式的时候

2.1 安装

npm 方式

npm install -S v-charts echarts

cdn 方式

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/v-charts/lib/index.min.js"></script>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/v-charts/lib/style.min.css"
/>

百度地图的使用，额外引用以下资源：

<script src="https://cdn.jsdelivr.net/npm/echarts-amap/dist/echarts-amap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>

2.2 完整引用

main.js

// main.js
import Vue from "vue";
import VCharts from "v-charts";
import App from "./App.vue";

Vue.use(VCharts);

new Vue({
  el: "#app",
  render: (h) => h(App),
});

2.3 按需引入

|- lib/
    |- line.common.js  -------------- 折线图
    |- bar.common.js  --------------- 条形图
    |- histogram.common.js  --------- 柱状图
    |- pie.common.js  --------------- 饼图
    |- ring.common.js  -------------- 环图
    |- funnel.common.js  ------------ 漏斗图
    |- waterfall.common.js  --------- 瀑布图
    |- radar.common.js  ------------- 雷达图
    |- map.common.js  --------------- 地图
    |- sankey.common.js  ------------ 桑基图
    |- heatmap.common.js  ----------- 热力图
    |- scatter.common.js  ----------- 散点图
    |- candle.common.js  ------------ k线图
    |- gauge.common.js  ------------- 仪表盘
    |- tree.common.js  -------------- 树图
    |- bmap.common.js  -------------- 百度地图
    |- amap.common.js  -------------- 高德地图

plugins/vcharts.js

import Vue from "vue";
import VeLine from "v-charts/lib/line.common";
// import App from './App.vue'

// Vue.component("ve-line", VeLine);
Vue.component(VeLine.name, VeLine);

// new Vue({
//   el: '#app',
//   render: h => h(App)
// })

2.4 注册文件 plugins/vcharts 引入到 main.js

main.js

import "./plugins/vcharts";

2.5 使用

<template>
  <div>
    <ve-line :data="chartData"></ve-line>
  </div>
</template>

<script>
import VeLine from 'v-charts/lib/line.common'
export default {
  components: { VeLine },
  data () {
    return {
      chartData: {
        columns: ['date', 'PV'],
        rows: [
          { 'date': '01-01', 'PV': 1231 },
          { 'date': '01-02', 'PV': 1223 },
          { 'date': '01-03', 'PV': 2123 },
          { 'date': '01-04', 'PV': 4123 },
          { 'date': '01-05', 'PV': 3123 },
          { 'date': '01-06', 'PV': 7123 }
        ]
      }
    }
  }
}
</script>