vue项目中使用echarts如此简单

大家好,我是大帅子,带大家在vue的项目里面使用echarts吧,最近在项目中我用到了,echarts 官网我看了一下文章写的并不是蛮好,所以在github上面搜了一下,还是有一个蛮好用,给大家分享一下,顺便带着大家就把步骤走一遍

---

1. 上github搜相关的内容

因为我们在vue的项目里面用 echarts ,所以我们直接打上关键词

2. 我们随意选一个热度高一点的

3. 我们按照步骤一步步来

下包

npm install echarts vue-echarts

npm i -D @vue/composition-api

4. 因为我们要vue2的项目用,

import ECharts from 'vue-echarts'



Vue.component('v-chart', ECharts)


// 最后要在项目中链入css

import "echarts";

4.直接在App 里面写

<v-chart class="chart" :option="option" />


data() {
    return {
      option: {
        title: {
          text: "Traffic Sources",
          left: "center"
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: [
            "Direct",
            "Email",
            "Ad Networks",
            "Video Ads",
            "Search Engines"
          ]
        },
        series: [
          {
            name: "Traffic Sources",
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: [
              { value: 335, name: "Direct" },
              { value: 310, name: "Email" },
              { value: 234, name: "Ad Networks" },
              { value: 135, name: "Video Ads" },
              { value: 1548, name: "Search Engines" }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      }
    };

---

好了,这边已经给大家介绍到这里,以上是我自己的理解,希望可以帮到大家, 欢迎留言我这边一定会第一时间给大家解答,喜欢的可以点赞收藏
🐣---->🦅         还需努力!大家一起进步!!!