Vue3调用Echarts

寒冰兔子

已于 2023-03-09 16:54:46 修改

阅读量473

点赞数

分类专栏： Web开发文章标签： echarts vue.js javascript

于 2022-06-24 18:41:54 首次发布

本文链接：https://blog.csdn.net/qq_27937897/article/details/125450712

版权

Web开发专栏收录该内容

2 篇文章 0 订阅

订阅专栏

导入库

npm install echarts --save

例子

<template>
  <h4 class="margin-top">传感器</h4>
  <hr />
  <div ref="el" style="width: 100%; height: 376px; background: #fff"></div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import * as echarts from "echarts";

const el = ref<HTMLElement | null>(null);

onMounted(() => {
  drawLine();
});

function drawLine() {
  let myChart = echarts.init(el.value);

  myChart.setOption({
    tooltip: {
      trigger: "item",
    },
    series: [
      {
        name: "传感器",
        type: "pie",
        radius: "80%",
        data: [
          { value: 100, name: "激光雷达" },
          { value: 140, name: "摄像头" },
        ],
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)",
        },
        label: {
          alignTo: "edge",
          formatter: "{name|{b}} {value|{c}}",
          minMargin: 5,
          edgeDistance: 10,
          lineHeight: 15,
          rich: {
            time: {
              fontSize: 10,
              color: "#999",
            },
          },
        },
        labelLine: {
          length: 15,
          length2: 0,
          maxSurfaceAngle: 80,
        },
      },
    ],
  });
  myChart.on("click", function (params) {
    alert(params.name + " " + params.value);
  });
}
</script>

<style scoped>
.margin-top {
  margin-top: 20px;
}
span {
  display: block;
}
</style>