快捷導(dǎo)航

Vue引用echarts超詳細(xì)步驟(附圖文)

更新時間：2023年08月16日 10:17:49 作者：weixin_43778617

這篇文章主要給大家介紹了關(guān)于Vue引用echarts超詳細(xì)步驟,vue中優(yōu)雅的使用echarts?在前端工作中,數(shù)據(jù)可視化用得最多的,可能就是圖表了,需要的朋友可以參考下

1、在要用的組件頁加一個id：main

<!-- echart -->
    <div id="main" style="height: 200px; width: 200px"></div>
    <div>11111</div>

2、在終端執(zhí)行安裝echarts命令： npm install echarts

3、引用echarts（5.0版本需要加 * as ）： import * as echarts from "echarts";

4、打開Apache ECharts官網(wǎng)：https://echarts.apache.org/examples/zh/index.html

選擇自己需要的圖，這里是一個雷達(dá)圖，我自己調(diào)整好樣式后的代碼：

option = {
  radar: {
    // shape: 'circle',
    radius:"66%",
    center:["50%","42%"],
    splitNumber:8,
    splitArea:{
      areaStyle:{
        color:"rgba(127,95,132,.3)",
        opacity:1,
        shadowBlur:45,
        shadowColor: 'rgba(0, 0, 0, 0.5)',
        shadowOffsetX:0,
        shadowOffsetY :15,
      }
    },
    indicator: [
      { name: '銷售', max: 6500 },
      { name: '政府', max: 16000 },
      { name: '信息技術(shù)', max: 30000 },
      { name: '客戶支持', max: 38000 },
      { name: '發(fā)展', max: 52000 },
      { name: '市場', max: 25000 }
    ]
  },
    legend: {
      left:"center",
      bottom:"10",
    data: ['分配預(yù)算', '預(yù)計支出','實際支出']
  },
  series: [
    {
      type: 'radar',
      symbolSize:0,
      areaStyle:{
        normal:{
             shadowBlur:13,
             shadowColor:"rgba(0,0,0,.2)",
             shadowOffsetX:0,
             shadowOffsetY:10,
             opacity:1,
        }
      },
      data: [
         {
                value: [5000, 7000, 12000, 11000, 15000, 14000],
                name: "分配預(yù)算",
              },
              {
                value: [4000, 9000, 15000, 15000, 13000, 11000],
                name: "預(yù)計支出",
              },
              {
                value: [5500, 11000, 12000, 15000, 12000, 12000],
                name: "實際支出",
              },
      ]
    }
  ]
};

script完整代碼如下：
可以自己調(diào)整樣式，在api文檔有對照解釋，鏈接如下，可供學(xué)習(xí)與參考：https://echarts.apache.org/zh/api.html#echarts

<script>
// echarts
import * as echarts from "echarts";
export default {
  data() {
    return {
      chartDom: "",
      myChart: "",
      option: "",
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.chartDom = document.getElementById("main");
      this.myChart = echarts.init(this.chartDom);
      this.initChart();
    });
  },
  methods: {
    initChart() {
      console.log(document.getElementById("main"), "----d");
      // return;
      // this.chart = echarts.init(this.$el, "macarons");
      this.option = {
        radar: {
          // shape: 'circle',
          radius: "66%",
          center: ["50%", "42%"],
          splitNumber: 8,
          splitArea: {
            areaStyle: {
              color: "rgba(127,95,132,.3)",
              opacity: 1,
              shadowBlur: 45,
              shadowColor: "rgba(0, 0, 0, 0.5)",
              shadowOffsetX: 0,
              shadowOffsetY: 15,
            },
          },
          indicator: [
            { name: "銷售", max: 6500 },
            { name: "政府", max: 16000 },
            { name: "信息技術(shù)", max: 30000 },
            { name: "客戶支持", max: 38000 },
            { name: "發(fā)展", max: 52000 },
            { name: "市場", max: 25000 },
          ],
        },
        legend: {
          left: "center",
          bottom: "10",
          data: ["分配預(yù)算", "預(yù)計支出", "實際支出"],
        },
        series: [
          {
            type: "radar",
            symbolSize: 0,
            areaStyle: {
              normal: {
                shadowBlur: 13,
                shadowColor: "rgba(0,0,0,.2)",
                shadowOffsetX: 0,
                shadowOffsetY: 10,
                opacity: 1,
              },
            },
            data: [
              {
                value: [5000, 7000, 12000, 11000, 15000, 14000],
                name: "分配預(yù)算",
              },
              {
                value: [4000, 9000, 15000, 15000, 13000, 11000],
                name: "預(yù)計支出",
              },
              {
                value: [5500, 11000, 12000, 15000, 12000, 12000],
                name: "實際支出",
              },
            ],
          },
        ],
      };
      this.option && this.myChart.setOption(this.option);
    },
    //
  },
};
</script>

效果如下：