Visualization | Data Visualization Document Echarts Project Initialization

Data visualization document echarts project initialization

Environment construction

# node environment
 nvm install v11.15.0
 # or
 nvm use 11.15.0

 # View node version
 node -V
 # v11.15.0

 npm -V
 # 6.7.0

 cnpm -V
 # [email protected]



 # Change the image
 # npm config set registry
 nrm use taobao
 npm config get registry



 # Global installation @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 # Data report project development
 # Select Manually
 # Babel
 # Router
 # CSS-Pre-processors
 # Linter/Formatter
 # history pattern no
 # Sass/SCSS(with node-sass)
 # ESLint+Standard config
 # Lint on save
 # Export all configuration files to specific files dedicated config files.
 # Enter project initialization and get a brand new project
 # If the error is reported because the network is slow, use Taobao mirror.



 # or

 # Use Taobao mirror to create a vue project
 vue create project name --registry=Taobao mirror address

1) element-ui introduction

vue add element
 # no, introduce on demand, select Chinese

2) echarts introduction

npm i -S echarts

1. Usevue-echartsPlugin

1.1 Installation

npm install echarts vue-echarts -S

1.2 CDN

<script src="/npm/[email protected]/dist/"></script>
<script src="/npm/[email protected]"></script>

1.3 Register

plugins/

import Vue from "vue";
import VueECharts from "vue-echarts"; // refers to components/ 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
("v-chart", VueECharts);

1.4 Register a fileplugins/vuechartsIntroduced to

import "./plugins/vuecharts";

1.5 Rendering with the v-chart component, weDynamically change the value of options parameterCome onDynamic rendering, very convenient.

• Using the v-echarts component, pass in options
• Write the style of data, options are consistent with the parameters in setOptions in ECharts
• Set width and height 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) * ;
         let r = (2 * t) * (2 * t);
         ([r, i]);
       }

       return {
         data1: {
           xAxis: {
             type: "category",
           },
           yAxis: {},
           series: [
             {
               type: "line",
               data: [100, 200, 300],
             },
           ],
         },
         polar: {
           title: {
             text: "Polar coordinates even value axes",
           },
           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>

2. Usev-chartsPlugin

Application scenarios:

1. Trifty data type conversion and modification of complex target items
2. When generating echarts quickly, you don't need to modify too much styles

2.1 Installation

npm install -S v-charts echarts

2.2 Complete Quote

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

(VCharts);

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

2.3 Introduced on demand

|- lib/
     |- ------------------------------------------------------------------------------------------------------------------------------
     |- ------------------------------------------------------------------------------------------------------------------------------
     |- --------- Bar chart
     |- ------------------------------------------------------------------------------------------------------------------------------
     |- ------------------------------------------------------------------------------------------------------------------------------
     |- ------------- Funnel diagram
     |- ----------- Waterfall
     |- -------------- Radar diagram
     |- ------------------------------------------------------------------------------------------------------------------------------
     |- ----------------- Sankitu
     |- ----------- Heat map
     |- ------------- Scatter plot
     |- ------------------------------------------------------------------------------------------------------------------------------
     |- --------------- Dashboard
     |- ------------------------------------------------------------------------------------------------------------------------------
     |- --------------- Baidu Map
     |- ------------------------------------------------------------------------------------------------------------------------------

plugins/

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

// ("ve-line", VeLine);
(, VeLine);

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

2.4 Register a fileplugins/vchartsIntroduced to

import "./plugins/vcharts";