可视化|数据可视化文档之 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
# cnpm@6.0.0
# 更改镜像
# npm config set registry https://registry.npmmirror.com
nrm use taobao
npm config get registry
# 全局安装 @vue/cli
npm i -g @vue/cli@4.3.1
# 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 -S1.2 CDN
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" />
</template>二、使用 v-charts 插件
应用场景：
[*]v-charts 是基于 Vue 2.x 和 ECharts 的图形库(Chart components based on Vue2.x and Echarts)
[*]繁琐的数据类型转化、修改复杂的靶置项
[*]快速生成 echarts，不需要过多的修改样式的时候
2.1 安装
npm 方式
npm install -S v-charts echartscdn 方式
百度地图的使用，额外引用以下资源：
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/<template>
<v-chart :options="polar" />
</template>|- line.common.js-------------- 折线图<template>
<v-chart :options="polar" />
</template>|- bar.common.js--------------- 条形图<template>
<v-chart :options="polar" />
</template>|- histogram.common.js--------- 柱状图<template>
<v-chart :options="polar" />
</template>|- pie.common.js--------------- 饼图<template>
<v-chart :options="polar" />
</template>|- ring.common.js-------------- 环图<template>
<v-chart :options="polar" />
</template>|- funnel.common.js------------ 漏斗图<template>
<v-chart :options="polar" />
</template>|- waterfall.common.js--------- 瀑布图<template>
<v-chart :options="polar" />
</template>|- radar.common.js------------- 雷达图<template>
<v-chart :options="polar" />
</template>|- map.common.js--------------- 地图<template>
<v-chart :options="polar" />
</template>|- sankey.common.js------------ 桑基图<template>
<v-chart :options="polar" />
</template>|- heatmap.common.js----------- 热力图<template>
<v-chart :options="polar" />
</template>|- scatter.common.js----------- 散点图<template>
<v-chart :options="polar" />
</template>|- candle.common.js------------ k线图<template>
<v-chart :options="polar" />
</template>|- gauge.common.js------------- 仪表盘<template>
<v-chart :options="polar" />
</template>|- tree.common.js-------------- 树图<template>
<v-chart :options="polar" />
</template>|- bmap.common.js-------------- 百度地图<template>
<v-chart :options="polar" />
</template>|- 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>
<v-chart :options="polar" />
</template><template>
<v-chart :options="polar" />
</template>
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]