首頁  >  文章  >  web前端  >  vue專案中怎麼用echarts

vue專案中怎麼用echarts

青灯夜游
青灯夜游原創
2023-01-17 17:42:487770瀏覽

使用方法:1、用「yarn add echarts」或「npm install echarts -S」或「cnpm install echarts -S」指令安裝Echarts;2、在main.js中用「import echarts from ' echarts' Vue.prototype.$echarts = echarts」進行引入;3、在vue頁中呼叫相關api即可。

vue專案中怎麼用echarts

本教學操作環境:windows7系統、vue3版,DELL G3電腦。

Echarts 商業級資料圖表,它是一個純JavaScript的圖標庫,兼容絕大部分的瀏覽器,底層依賴輕量級的canvas類庫ZRender,提供直觀,生動,可交互,可高度個性化客製化的數據視覺化圖表。創新的拖曳重運算、資料視圖、值域漫遊等特性大大增強了使用者體驗,賦予了使用者對資料進行挖掘、整合的能力。

Echarts,它是一個與框架無關的 JS 圖表庫,但是它基於Js,這樣很多框架都能使用它,例如Vue。

簡單開始

#安裝Echarts

        以下幾種安裝方式擇其一

        本專案安裝的是所採用的yarnecharts 版本號碼是4.8.0

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

全域引入

        在main.js中

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

        到了這一步驟說明你已經把準備工作做完了

清空多餘程式碼

        我們先把頁面上其他不需要用到的程式碼給清除吧

<template>
  <div class="home">

</div>
</template>

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

建立一個容器vue專案中怎麼用echarts

建立一個id 為 的div 作為容器(使用id會有個小問題,在最後解答)建立一個方法#在生命週期中呼叫此方法請看大螢幕        先講講其中簡單的一些設定參數,枯燥乏味,但是摸清楚之後,以後畫圖那是順手得一**參數名稱作用title
EChart
<div id="EChart" style="width: 300px; height: 300px;"></div>
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);
},
mounted() {
    // 在生命周期中调用 getRenderer 方法
    this.getRenderer();
},
        吃瓜群眾:「這特麼不是官方範例麼?能不能炫一點」         嚴老師:「說實話確實有點low ,不要慌這才哪到哪呢,我們先從基礎講堂開始嘛」
先去了解其參數
        先整點簡單、常用的來看看(備註裡面皆是對應API地址)
備註
###作為圖表名稱######https://echarts.apache.org/zh/option.html#title###############legend##### ####作為圖表的標記######https://echarts.apache.org/zh/option.html#legend###############xAxis### ######作為圖表的X軸######https://echarts.apache.org/zh/option.html#xAxis###############yAxis #########作為圖表的Y軸######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######## ####

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

来造作一下下

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],
       },
    ],
};
vue專案中怎麼用echarts

饼状图

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

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

let config = {
    tooltip: {},
    legend:{
       data : ["严","老","湿"]
    },
    series: [
       {
          name: "销量",
          type: "pie",
          data: [
              {value:20,name:"严"},
              {value:10,name:"老"},
              {value:15,name:"湿"}
          ],
        },
    ],
};
vue專案中怎麼用echarts

仪表盘

        仪表盘将 type 修改为 gauge

let config = {
    series: [
       {
         name: "销量",
         type: "gauge",
         data: [50],
       },
    ],
};
vue專案中怎麼用echarts

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

画一个老严的脸

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;}
              ]
           },
     ],
};
vue專案中怎麼用echarts

哈哈哈  倒三角就是老严的脸了 (脑补一下下)

legend

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

vue專案中怎麼用echarts

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;]

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

例如这样:

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

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
    }]
};
vue專案中怎麼用echarts

但是有时候呢,我们会根据需求,要做一个双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;,
    }]
}
vue專案中怎麼用echarts

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;,
    }]
};
vue專案中怎麼用echarts

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

使用id为问题所在

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

  • id重名怎么办?

  • 数据多个渲染怎么办?

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

具体怎么使用我们来看看

<div ref="EChart" style="width: 300px; height: 300px;"></div>
// 同样的初始化参数 但是我们此次使用的是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);

相关推荐:vue.js视频教程

以上是vue專案中怎麼用echarts的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn