How to use echarts in vue project-Front-end Q&A-php.cn

Instructions for use: 1. Use the "yarn add echarts" or "npm install echarts -S" or "cnpm install echarts -S" command to install Echarts; 2. Use "import echarts from ' in main.js echarts' Vue.prototype.$echarts = echarts" to introduce; 3. Just call the relevant api in the vue page.

How to use echarts in vue project

The operating environment of this tutorial: windows7 system, vue3 version, DELL G3 computer.

Echarts is a commercial-grade data chart. It is a pure JavaScript icon library, compatible with most browsers. The bottom layer relies on the lightweight canvas class library ZRender to provide intuitive, vivid, interactive, and highly Personalized data visualization charts. Innovative drag-and-drop recalculation, data views, value range roaming and other features greatly enhance the user experience and empower users with the ability to mine and integrate data.

Echarts, it is a JS chart library that has nothing to do with the framework, but it is based on Js so that many frameworks can use it, such as Vue.

Easy to start

Install Echarts

Choose one of the following installation methods

This project is installed using yarn, echarts The version number is 4.8.0

// yarn
yarn add echarts
// npm
npm install echarts -S
// cnpm
cnpm install echarts -S

Copy after login

Global introduction

## In main.js

import echarts from &#39;echarts&#39;
Vue.prototype.$echarts = echarts

Copy after login

Reaching this step means you have finished the preparation work

##Clear the excess code Let’s clear the other unnecessary codes on the page first

<template>
  <div class="home">

</div>
</template>

<script>
export default {
name: &#39;Home&#39;,
}
</script>

Copy after login

Create a containerCreate a div with an id of

EChart

as a container (there will be a small problem when using the id, which will be answered at the end)<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;"><div id="EChart" style="width: 300px; height: 300px;"></div></pre><div class="contentsignin">Copy after login</div></div>

Create a method

getRenderer() {
      console.log(this.$echarts);
      // 基于准备好的dom，初始化echarts实例
      let EChart = this.$echarts.init(document.getElementById("EChart"));
      // 配置参数
      let config = {
        title: { text: "悲伤日记" },
        tooltip: {},
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      };
      // 设置参数
    EChart.setOption(config);
},

Copy after login

##Call this method during the life cycle

mounted() {
    // 在生命周期中调用 getRenderer 方法
    this.getRenderer();
},

Copy after login

Please look at the big screen

## People who eat melons: "What the hell Isn't it an official example? Can you show it off a little bit?"

First understand its parameters Let’s talk about some of the simple configuration parameters first, which is boring, but after you understand it , it will be easy to draw pictures in the future Let’s take a look at some simple and commonly used ones first (the notes all correspond to the

API

address)

Parameter nameFunction##titleAs chart nameMarkers as diagramsAs the X-axis of the chartAs the Y axis of the chartSeries as chartColor list as chart

掰扯了这么多，估计大家心里也没个底，实战一下吧

来造作一下下

series type

来吧！！展示

折线图

修改折线图,复制上面的config代码

只用修改一处地方，那就是series 中的type属性为line即可

let config = {
   title: { text: "悲伤日记" },
   tooltip: {},
   xAxis: {
      data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
    },
    yAxis: {},
    series: [
       {
            name: "销量",
            type: "line",
            data: [5, 20, 36, 10, 10, 20],
       },
    ],
};

Copy after login

饼状图

饼状图，我们也来看看，将type修改为pie

当然我们需要把多余的X轴Y轴配置删除咯,data数据格式也需要修改一下

let config = {
    tooltip: {},
    legend:{
       data : ["严","老","湿"]
    },
    series: [
       {
          name: "销量",
          type: "pie",
          data: [
              {value:20,name:"严"},
              {value:10,name:"老"},
              {value:15,name:"湿"}
          ],
        },
    ],
};

Copy after login

仪表盘

仪表盘将 type 修改为 gauge

let config = {
    series: [
       {
         name: "销量",
         type: "gauge",
         data: [50],
       },
    ],
};

Copy after login

嗯~ 看起来有那么一点味道了

画一个老严的脸

let config = {
      series: [
          {
            name: "销量",
            type: "funnel",
            data: [
                 {value: 60, name: &#39;访问&#39;},
                 {value: 40, name: &#39;咨询&#39;},
                 {value: 20, name: &#39;订单&#39;},
                 {value: 80, name: &#39;点击&#39;},
                 {value: 100, name: &#39;展现&#39;}
              ]
           },
     ],
};

Copy after login

哈哈哈倒三角就是老严的脸了（脑补一下下）

legend

刚刚其实我们已经用到了这个参数噢 ps：饼状图

legend 可以作为图表的标记或颜色的名称描述(专业名词：图例)

它的type有两个参数plain || scroll

默认为plain 当图表内容比较丰富的时候可以使用 scroll 可以带有滚动操作

color

都说颜色是Web的灵魂所在，每一个人都是画手

官方默认配色：

[&#39;#c23531&#39;,&#39;#2f4554&#39;, &#39;#61a0a8&#39;, &#39;#d48265&#39;, &#39;#91c7ae&#39;,&#39;#749f83&#39;,  &#39;#ca8622&#39;, &#39;#bda29a&#39;,&#39;#6e7074&#39;, &#39;#546570&#39;, &#39;#c4ccd3&#39;]

Copy after login

我们也可以自己修改颜色,规则是按数据对应的index找color颜色

例如这样：

let config = {
     color:["red","blue","yellow"],
    legend:{
            data : ["严","老","湿"]
    },
    series: [
            {
               name: "销量",
               type: "pie",
               data: [
                    {value:20,name:"严"},
                    {value:10,name:"老"},
                    {value:15,name:"湿"}
               ],
          },
    ],
};

Copy after login

yAxis

我们还是以线条为参考8

先看看基础篇,我们在y轴声明了一个name

let config = {
    xAxis: {
        type: &#39;category&#39;,
        data: [&#39;Mon&#39;, &#39;Tue&#39;, &#39;Wed&#39;, &#39;Thu&#39;, &#39;Fri&#39;, &#39;Sat&#39;, &#39;Sun&#39;]
    },
    yAxis:[ {
        name:"销量",
        type: &#39;value&#39;
    }],
    series: [{
        name:&#39;销量&#39;,
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: &#39;line&#39;,
        smooth: true
    }]
};

Copy after login

但是有时候呢，我们会根据需求，要做一个双Y轴，顾名思义双Y轴，在加一个Y轴就好了

let config = {
    xAxis: {
        type: &#39;category&#39;,
        data: [&#39;Mon&#39;, &#39;Tue&#39;, &#39;Wed&#39;, &#39;Thu&#39;, &#39;Fri&#39;, &#39;Sat&#39;, &#39;Sun&#39;]
    },
    yAxis:[ {
        name:"l",
        type: &#39;value&#39;
    }, {
        name:"r",
        type: &#39;value&#39;
    }],
    series: [{
        name:&#39;l&#39;,
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: &#39;line&#39;,
        smooth: true
    },
    {
        name:&#39;r&#39;,
        data: [20, 10, 60, 100, 300, 600, 800],
        type: &#39;bar&#39;,
    }]
}

Copy after login

xAxis

x轴与y轴基本同理，直接改成数组就成为双x轴了

let config = {
    xAxis: [{
        type: &#39;category&#39;,
        data: [&#39;Mon&#39;, &#39;Tue&#39;, &#39;Wed&#39;, &#39;Thu&#39;, &#39;Fri&#39;, &#39;Sat&#39;, &#39;Sun&#39;]
    },{
        type: &#39;category&#39;,
        data: [&#39;0&#39;, &#39;1&#39;, &#39;2&#39;, &#39;3&#39;, &#39;4&#39;, &#39;5&#39;, &#39;6&#39;]
    }],
    yAxis:[{
        name:"l",
        type: &#39;value&#39;
    }, {
        name:"r",
        type: &#39;value&#39;
    }],
    series: [{
        name:&#39;l&#39;,
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: &#39;line&#39;,
        smooth: true
    },
    {
        name:&#39;r&#39;,
        data: [20, 10, 60, 100, 300, 600, 800],
        type: &#39;bar&#39;,
    }]
};

Copy after login

到了上面基础篇也就差不多了

使用id为问题所在

其实我们讲了这么多，我们梳理梳理最开始的问题

id重名怎么办？
数据多个渲染怎么办？

答案：使用ref，因为vue是单页面，使用id出现重名会导致渲染问题

具体怎么使用我们来看看

<div ref="EChart" style="width: 300px; height: 300px;"></div>

Copy after login

// 同样的初始化参数 但是我们此次使用的是ref 
let EChart = this.$echarts.init(this.$refs.EChart)
// 配置参数
let config = {
    xAxis: [{
        type: &#39;category&#39;,
        data: [&#39;Mon&#39;, &#39;Tue&#39;, &#39;Wed&#39;, &#39;Thu&#39;, &#39;Fri&#39;, &#39;Sat&#39;, &#39;Sun&#39;]
    },{
        type: &#39;category&#39;,
        data: [&#39;0&#39;, &#39;1&#39;, &#39;2&#39;, &#39;3&#39;, &#39;4&#39;, &#39;5&#39;, &#39;6&#39;]
    }],
    yAxis:[{
        name:"l",
        type: &#39;value&#39;
    }, {
        name:"r",
        type: &#39;value&#39;
    }],
    series: [{
        name:&#39;l&#39;,
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: &#39;line&#39;,
        smooth: true
    },
    {
        name:&#39;r&#39;,
        data: [20, 10, 60, 100, 300, 600, 800],
        type: &#39;bar&#39;,
    }]
};
// 设置参数
EChart.setOption(config);

Copy after login

Remarks
`https://echarts.apache.org/zh/option.html#title`		legend
`https://echarts.apache.org/zh/option.html#legend`		xAxis
`https://echarts.apache.org/zh/option.html#xAxis`		yAxis
`https://echarts.apache.org/zh/option.html#yAxis`		series
`https://echarts.apache.org/zh/option.html#series`		color
`https://echarts.apache.org/zh/option.html#color`

How to use echarts in vue project

Easy to start

Install Echarts

Global introduction

##Clear the excess code Let’s clear the other unnecessary codes on the page first

Create a containerCreate a div with an id of

##Call this method during the life cyclemounted() { // 在生命周期中调用 getRenderer 方法 this.getRenderer(); },Copy after login

First understand its parameters Let’s talk about some of the simple configuration parameters first, which is boring, but after you understand it , it will be easy to draw pictures in the future Let’s take a look at some simple and commonly used ones first (the notes all correspond to the

来造作一下下

series type

折线图

饼状图

仪表盘

画一个老严的脸

legend

color

yAxis

xAxis

使用id为问题所在

##Call this method during the life cycle
mounted() { // 在生命周期中调用 getRenderer 方法 this.getRenderer(); },
Copy after login