ViewDesign

在vue中使用echarts有两种方法

一、安装并全局引入

1、通过npm获取echarts

npm install echarts --save

2、在 main.js 中添加下面两行代码

import * as echarts from 'echarts'

Vue.prototype.$echarts = echarts //挂载到Vue实例上面

二、使用  https://echarts.apache.org/examples/zh/index.html#chart-type-pie

<template>
  <div>
    <div class="container">
        <div id="echart"></div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  // 页面初始化挂载dom
  mounted() {
    this.getLoadEcharts();
  },
  methods: {
    getLoadEcharts() {
      var myChart = this.$echarts.init(
        document.getElementById("echart")
      );
      var colorList = ["#4FE894", "#EF0C27", "#FEE7EA"];
      var listData = [
        { name: "不明", value: 20 },
        { name: "已判明", value: 20 },
        { name: "未发现", value: 20 }
      ];
      var option = {
        color: colorList,
        title: {
          x: "center",
          y: "center",
          textStyle: {
            color: "#000",
            fontSize: 20
          }
        },
        legend: {
          orient: "vertical",
          bottom: 5,
          align: "right",
          right: 15,
          textStyle: {
            color: "#000",
            fontSize: 20
          },
          selectedMode: false,
          data: ["元素1", "元素2", "元素3"]
        },
        tooltip: {
          trigger: "item"
        },
        series: [
          {
            type: "pie",
            center: ['50%', '50%'],
            radius: ['55%', '35%'],
            itemStyle: {
              normal: {
                color: function(params) {
                  return colorList[params.dataIndex];
                }
              }
            },
            label: {
              show: true,
              fontSize: 10,
              color: "#000",
              formatter: function(data) {
                return data.name + ":" + data.percent.toFixed(0) + "%";
              }
            },
            labelLine: {
              normal: {
                length: 15,
                length2: 15,
                lineStyle: {
                  width: 2
                }
              }
            },
            data: listData
          }
        ]
      };
      myChart.setOption(option);
    }
  }
};
</script>
<style scoped>
.container{
    width: 300px;
    height: 300px;
    margin-left: 30px;
}
#echart{
    width: 100%;
    height: 100%;
}
</style>