Cara menggunakan echarts dalam projek vue

Penggunaan: 1. Gunakan arahan "yarn add echarts" atau "npm install echarts -S" atau "cnpm install echarts -S" untuk memasang Echarts 2. Gunakan "import echarts from ' in main.js echarts ' Vue.prototype.$echarts = echarts" untuk memperkenalkan; 3. Hanya panggil api yang berkaitan dalam halaman vue.

Persekitaran pengendalian tutorial ini: sistem windows7, versi vue3, komputer DELL G3.

Echarts ialah carta data gred komersial Ia adalah perpustakaan ikon JavaScript tulen, serasi dengan kebanyakan penyemak imbas Lapisan bawah bergantung pada pustaka kelas kanvas ringan ZRender untuk menyediakan intuitif, jelas, interaktif dan sangat diperibadikan. carta visualisasi data. Pengiraan semula drag-and-drop yang inovatif, paparan data, perayauan julat nilai dan ciri-ciri lain sangat meningkatkan pengalaman pengguna dan memperkasakan pengguna dengan keupayaan untuk melombong dan menyepadukan data.

Echarts, ia ialah perpustakaan carta JS bebas rangka kerja, tetapi ia berdasarkan Js supaya banyak rangka kerja boleh menggunakannya, seperti Vue.

Mulakan dengan mudah

Pasang Echarts

Pilih salah satu daripada kaedah pemasangan berikut

Projek ini dipasang menggunakan yarn, echarts Nombor versi ialah 4.8.0

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

Pengenalan global

In main.js

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

Mencapai langkah ini bermakna anda telah menyelesaikan persiapan Selesai

Kosongkan kod berlebihan

Kami mula-mula mengalih keluar bahagian lain halaman yang tidak diperlukan Kosongkan kod

<template>
  <div class="home">

</div>
</template>

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

Buat bekas

Buat id Cipta kaedah EChart

untuk div

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

sebagai bekas (akan ada masalah kecil dengan menggunakan id, yang akan dijawab pada akhirnya)

>

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);
},

Panggil kaedah ini semasa kitaran hayat

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

Sila lihat skrin besar

Orang yang makan tembikai: "Bukankah ini contoh rasmi? Boleh? Anda tidak boleh menonjol sedikit"

Cikgu Yan: "Sejujurnya, ia agak rendah, jangan panik, mari kita mulakan dengan kelas kuliah asas dahulu”

Fahami dulu parameternya

Jom bercakap tentang beberapa parameter konfigurasi mudah, membosankan, tetapi selepas menyentuhnya, lukisan pada masa hadapan adalah lancar Dapatkan **

Mari kita lihat beberapa yang mudah dan biasa digunakan dahulu (nota semuanya sepadan dengan alamat

) API

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

来造作一下下

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

饼状图

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

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

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

仪表盘

        仪表盘将 type 修改为 gauge

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

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

画一个老严的脸

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

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

legend

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

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

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

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

color

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

        官方默认配色 ：

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

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

例如这样：

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: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis:[ {
        name:"销量",
        type: 'value'
    }],
    series: [{
        name:'销量',
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        smooth: true
    }]
};

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

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

xAxis

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

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

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

使用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: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },{
        type: 'category',
        data: ['0', '1', '2', '3', '4', '5', '6']
    }],
    yAxis:[{
        name:"l",
        type: 'value'
    }, {
        name:"r",
        type: 'value'
    }],
    series: [{
        name:'l',
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        smooth: true
    },
    {
        name:'r',
        data: [20, 10, 60, 100, 300, 600, 800],
        type: 'bar',
    }]
};
// 设置参数
EChart.setOption(config);

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

Atas ialah kandungan terperinci Cara menggunakan echarts dalam projek vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!