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

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

环境搭建

1. # node 环境
2. nvm install v11.15.0
3. # or
4. nvm use 11.15.0
6. # 查看 node 版本
7. node -V
8. # v11.15.0
10. npm -V
11. # 6.7.0
13. cnpm -V
14. # cnpm@6.0.0
18. # 更改镜像
19. # npm config set registry https://registry.npmmirror.com
20. nrm use taobao
21. npm config get registry
25. # 全局安装 @vue/cli
26. npm i -g @vue/cli@4.3.1
27. # cnpm i -g @vue/cli
29. vue --version
30. # vue -V
31. # @vue/cli 4.3.1
35. vue create datev-report-dev # 数据报表项目开发
36. # 选择手动 Manually
37. #   Babel
38. #   Router
39. #   CSS-Pre-processors
40. #   Linter/Formatter
41. #   history 模式 no
42. #   Sass/SCSS(with node-sass)
43. #   ESLint+Standard config
44. #   Lint on save
45. #   将所有的配置文件输出到特定的文件dedicated config files.
46. # 进入项目初始化，得到全新的项目
47. #   如果报错是因为网络慢，要用淘宝镜像。
51. # or
53. # 使用淘宝镜像 来创建 vue 项目
54. vue create 项目名称 --registry=淘宝镜像地址

复制代码

1) element-ui 引入

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

复制代码

2) echarts 引入

1. npm i -S echarts

复制代码

一、使用 vue-echarts 插件

1.1 安装

1. npm install echarts vue-echarts -S

复制代码

1.2 CDN

1. [/code][size=2]1.3 注册[/size]
3. [indent]plugins/vuecharts.js
4. [/indent][code]import Vue from "vue";
5. import VueECharts from "vue-echarts"; // refers to components/ECharts.vue in webpack
7. // import ECharts modules manually to reduce bundle size
8. import "echarts/lib/chart/bar";
9. import "echarts/lib/component/tooltip";
11. // If you want to use ECharts extensions, just import the extension package and it will work
12. // Taking ECharts-GL as an example:
13. // You only need to install the package with `npm install --save echarts-gl` and import it as follows
14. import "echarts-gl";
16. // register component to use
17. Vue.component("v-chart", VueECharts);

复制代码

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

main.js

1. import "./plugins/vuecharts";

复制代码

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

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

1. <template>
2.   <v-chart :options="polar" />
3.   
4. </template>

复制代码

二、使用 v-charts 插件

应用场景：

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

2.1 安装

npm 方式

1. npm install -S v-charts echarts

复制代码

cdn 方式

1. [/code][size=1]百度地图的使用，额外引用以下资源：[/size]
3. [code]

复制代码

2.2 完整引用

main.js

1. // main.js
2. import Vue from "vue";
3. import VCharts from "v-charts";
4. import App from "./App.vue";
6. Vue.use(VCharts);
8. new Vue({
9.   el: "#app",
10.   render: (h) => h(App),
11. });

复制代码

2.3 按需引入

1. |- lib/<template>
2.   <v-chart :options="polar" />
3.   
4. </template>|- line.common.js  -------------- 折线图<template>
5.   <v-chart :options="polar" />
6.   
7. </template>|- bar.common.js  --------------- 条形图<template>
8.   <v-chart :options="polar" />
9.   
10. </template>|- histogram.common.js  --------- 柱状图<template>
11.   <v-chart :options="polar" />
12.   
13. </template>|- pie.common.js  --------------- 饼图<template>
14.   <v-chart :options="polar" />
15.   
16. </template>|- ring.common.js  -------------- 环图<template>
17.   <v-chart :options="polar" />
18.   
19. </template>|- funnel.common.js  ------------ 漏斗图<template>
20.   <v-chart :options="polar" />
21.   
22. </template>|- waterfall.common.js  --------- 瀑布图<template>
23.   <v-chart :options="polar" />
24.   
25. </template>|- radar.common.js  ------------- 雷达图<template>
26.   <v-chart :options="polar" />
27.   
28. </template>|- map.common.js  --------------- 地图<template>
29.   <v-chart :options="polar" />
30.   
31. </template>|- sankey.common.js  ------------ 桑基图<template>
32.   <v-chart :options="polar" />
33.   
34. </template>|- heatmap.common.js  ----------- 热力图<template>
35.   <v-chart :options="polar" />
36.   
37. </template>|- scatter.common.js  ----------- 散点图<template>
38.   <v-chart :options="polar" />
39.   
40. </template>|- candle.common.js  ------------ k线图<template>
41.   <v-chart :options="polar" />
42.   
43. </template>|- gauge.common.js  ------------- 仪表盘<template>
44.   <v-chart :options="polar" />
45.   
46. </template>|- tree.common.js  -------------- 树图<template>
47.   <v-chart :options="polar" />
48.   
49. </template>|- bmap.common.js  -------------- 百度地图<template>
50.   <v-chart :options="polar" />
51.   
52. </template>|- amap.common.js  -------------- 高德地图

复制代码

plugins/vcharts.js

1. import Vue from "vue";
2. import VeLine from "v-charts/lib/line.common";
3. // import App from './App.vue'
5. // Vue.component("ve-line", VeLine);
6. Vue.component(VeLine.name, VeLine);
8. // new Vue({
9. //   el: '#app',
10. //   render: h => h(App)
11. // })

复制代码

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

main.js

1. import "./plugins/vcharts";

复制代码

2.5 使用

1. <template>
2.   <v-chart :options="polar" />
3.   
4. </template><template>
5.   <v-chart :options="polar" />
6.   
7. </template>

复制代码

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！