可视化|数据可视化文档之 echarts 项目初始化
<h1 id="数据可视化文档之-echarts-项目初始化">数据可视化文档之 echarts 项目初始化</h1><h2 id="环境搭建">环境搭建</h2>
<pre><code class="language-bash"># 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=淘宝镜像地址
</code></pre>
<h3 id="1-element-ui-引入">1) element-ui 引入</h3>
<pre><code class="language-bash">vue add element
# no，按需引入，选择中文
</code></pre>
<h3 id="2-echarts-引入">2) echarts 引入</h3>
<pre><code class="language-bash">npm i -S echarts
</code></pre>
<h4 id="一使用-vue-echarts-插件">一、使用 <strong><code>vue-echarts</code></strong> 插件</h4>
<h5 id="11-安装">1.1 安装</h5>
<pre><code class="language-bash">npm install echarts vue-echarts -S
</code></pre>
<h5 id="12-cdn">1.2 CDN</h5>
<pre><code><script src="https://cdn.jsdelivr.net/npm/echarts@4.1.0/dist/echarts.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@4.0.2"></script>
</code></pre>
<h5 id="13-注册">1.3 注册</h5>
<blockquote>
<p>plugins/vuecharts.js</p>
</blockquote>
<pre><code class="language-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);
</code></pre>
<h5 id="14-注册文件-pluginsvuecharts-引入到-mainjs">1.4 注册文件 <code>plugins/vuecharts</code> 引入到 <code>main.js</code></h5>
<blockquote>
<p>main.js</p>
</blockquote>
<pre><code class="language-js">import "./plugins/vuecharts";
</code></pre>
<h5 id="15-使用-v-chart-组件渲染我们动态改变-options-参数的值来进行动态渲染非常便利">1.5 使用 v-chart 组件渲染，我们<strong>动态改变 options 参数的值</strong>来进行<strong>动态渲染</strong>，非常便利。</h5>
<ul>
<li>使用 v-echarts 组件，传入 options</li>
<li>编写 data 的样式，options 与 ECharts 中的 setOptions 中的参数是一致的</li>
<li>设置 宽高 100%</li>
</ul>
<pre><code class="language-html"><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();
}
return {
data1: {
xAxis: {
type: "category",
},
yAxis: {},
series: [
{
type: "line",
data: ,
},
],
},
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>
</code></pre>
<h4 id="二使用-v-charts-插件">二、使用 <strong><code>v-charts</code></strong> 插件</h4>
<blockquote>
<p>应用场景：</p>
<ol>
<li>v-charts 是基于 Vue 2.x 和 ECharts 的图形库(Chart components based on Vue2.x and Echarts)</li>
<li>繁琐的数据类型转化、修改复杂的靶置项</li>
<li>快速生成 echarts，不需要过多的修改样式的时候</li>
</ol>
</blockquote>
<h5 id="21-安装">2.1 安装</h5>
<h6 id="npm-方式">npm 方式</h6>
<pre><code class="language-bash">npm install -S v-charts echarts
</code></pre>
<h6 id="cdn-方式">cdn 方式</h6>
<pre><code><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"
/>
</code></pre>
<h6 id="百度地图的使用额外引用以下资源">百度地图的使用，额外引用以下资源：</h6>
<pre><code><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>
</code></pre>
<h5 id="22-完整引用">2.2 完整引用</h5>
<blockquote>
<p>main.js</p>
</blockquote>
<pre><code class="language-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),
});
</code></pre>
<h5 id="23-按需引入">2.3 按需引入</h5>
<pre><code>|- 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-------------- 高德地图
</code></pre>
<blockquote>
<p>plugins/vcharts.js</p>
</blockquote>
<pre><code class="language-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)
// })
</code></pre>
<h5 id="24-注册文件-pluginsvcharts-引入到-mainjs">2.4 注册文件 <code>plugins/vcharts</code> 引入到 <code>main.js</code></h5>
<blockquote>
<p>main.js</p>
</blockquote>
<pre><code class="language-js">import "./plugins/vcharts";
</code></pre>
<h5 id="25-使用">2.5 使用</h5>
<pre><code class="language-js"><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>
</code></pre><br><br>
来源：https://www.cnblogs.com/djsz3y/p/18788235
頁:
[1]