【vue3或3.2中使用echarts】展示饼图

一、安装echarts

npm i echarts 或者 npm install echarts --save

安装成功

二、在页面引入

import * as echarts from "echarts";

三、在vue中写入HTML代码

例如：

 <div class="canvas-pie">
          <div id="oil-discount"></div>
          <div class="line"></div>
          <div id="oil-pay"></div>
  </div>

注意：在style中设置宽高

 #oil-discount{
            width: 254px;
            height: 298px;
          }
          #oil-pay{
            width: 254px;
            height: 298px;
  }

四、在script里面获取DOM初始化echarts

例如：

<script setup>
import { ref, reactive, toRefs, watch, onMounted, getCurrentInstance } from "vue";
import * as echarts from "echarts";

onMounted(()=>{
  changeBar()
  changePay()
})
// 基本柱形图
function changeBar(){
  const myChart = echarts.init(document.getElementById("oil-discount"));
  const data = [{
          value: 335,
          name: '直接访问'
        },
        {
          value: 234,
          name: '联盟广告'
        },
        {
          value: 985,
          name: '搜索引擎'
        },{
          value: 138,
          name: '满减代理'
        },
        {
          value: 225,
          name: '限时代理'
        }, 
        {
          value: 558,
          name: '固定代理'
        },
        {
          value: 360,
          name:''
        }]
  myChart.setOption({
           color: [
            "#96DDF2",
            "#3436C7",
            "#63DCA6",
            "#5B93FF",
            "#F899C9 ",
            "#FF8F6B",
            "#FFD66B",
            "#FF7723",
            "#00FF7F",
            "#FF0000",
          ],
          tooltip: { trigger: "item" },
          legend: {
            show: window.innerWidth > 1680,
            bottom: "0",
            left: "center",
            itemWidth: 15,
            itemHeight: 12,
          },
          graphic: [
            {
              type: "text",
              left: "center",
              top: "28%",
              style: {
                fill: "#333333",
                text: 50 + "元",
                font: 'normal bolder 1em "Microsoft YaHei"',
                textAlign: "center",
              },
            },
            {
              type: "text",
              left: "center",
              top: "38%",
              style: {
                fill: "#333333",
                text: "实收金额",
                font: '14px bolder "Microsoft YaHei"',
                textAlign: "center",
                textVerticalAlign: "middle",
              },
            },
          ],
          series: [
            {
              name: "实收金额",
              type: "pie",
              center: ["50%", "35%"],
              radius: ["35%", "60%"],
              avoidLabelOverlap: false,
              label: { show: false },
              data: data,
            },
          ],
      }) 
}
function changePay(){
    const myChart = echarts.init(document.getElementById("oil-pay"));
    const data = [{
          value: 335,
          name: '直接访问'
        },
        {
          value: 234,
          name: '联盟广告'
        },
        {
          value: 985,
          name: '搜索引擎'
        },{
          value: 138,
          name: '满减代理'
        },
        {
          value: 225,
          name: '限时代理'
        }, 
        {
          value: 558,
          name: '固定代理'
        },
        {
          value: 360,
          name:''
        }]
    myChart.setOption({
           color: [
            "#1890FF",
            "#2FC25B",
            "#FACC14",
            "#223273",
            "#8543E0",
            "#13C2C2",
            "#3436C7",
            "#FF7723",
            "#00FF7F",
            "#FF0000",
          ],
          tooltip: { trigger: "item" },
          legend: {
            show: window.innerWidth > 1680,
            bottom: "0",
            left: "center",
            itemWidth: 15,
            itemHeight: 12,
          },
          graphic: [
            {
              type: "text",
              left: "center",
              top: "28%",
              style: {
                fill: "#333333",
                text: 50 + "元",
                font: 'normal bolder 1em "Microsoft YaHei"',
                textAlign: "center",
              },
            },
            {
              type: "text",
              left: "center",
              top: "38%",
              style: {
                fill: "#333333",
                text: "展业页面",
                font: '14px bolder "Microsoft YaHei"',
                textAlign: "center",
                textVerticalAlign: "middle",
              },
            },
          ],
          series: [
            {
              name: "展业页面",
              type: "pie",
              center: ["50%", "35%"],
              radius: ["35%", "60%"],
              avoidLabelOverlap: false,
              label: { show: false },
              data: data,
            },
          ],
      }) 
}
</script>

五、效果页面