在vue中使用echarts

1、通过npm获取echarts

npm install echarts --save

2、在vue项目中引入echarts（main.js）

import echarts from ‘echarts’
Vue.prototype.$echarts = echarts

3、新建Echarts.vue文件（例子）

<template>
  <div id="dashboard">
    <div id="myChart" :style="{ width: '800px', height: '800px' }"></div>
  </div>
</template>

<script>
export default {
  name: "Dashboard",
  data() {
    return {
      chartData: {
        columns: ["日期", "销售额"],
        rows: [
          { 日期: "1月1日", 销售额: 123 },
          { 日期: "1月2日", 销售额: 1223 },
          { 日期: "1月3日", 销售额: 2123 },
          { 日期: "1月4日", 销售额: 4123 },
          { 日期: "1月5日", 销售额: 3123 },
          { 日期: "1月6日", 销售额: 7123 },
        ],
      },
    };
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        // backgroundColor: '#2c343c',
        title: {
          text: "todolist 种类",
          left: "center",
          top: 20,
          textStyle: {
            color: "#000",
          },
        },
        tooltip: { trigger: "item" },
        // 在vue中使用charts必须带有xAxis yAxis(横纵坐标) 否则无法显示
        xAxis: {},
        yAxis: {},
        visualMap: {
          show: false,
          min: 80,
          max: 600,
          inRange: {
            colorLightness: [0, 1],
          },
        },

        series: [
          {
            name: "类型",
            type: "pie",
            radius: "55%",
            center: ["50%", "50%"],
            data: [
              { value: 335, name: "直接访问" },
              { value: 310, name: "邮件营销" },
              { value: 274, name: "联盟广告" },
              { value: 235, name: "视频广告" },
              { value: 400, name: "搜索引擎" },
            ].sort(function (a, b) {
              return a.value - b.value;
            }),
            roseType: "radius",
            label: {
              color: "rgba(0, 0, 0, 1)",
            },
            labelLine: {
              lineStyle: {
                color: "rgba(255, 255, 255, 0.3)",
              },
              smooth: 0.2,
              length: 10,
              length2: 20,
            },
            itemStyle: {
              color: "#c23531",
              shadowBlur: 200,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },

            animationType: "scale",
            animationEasing: "elasticOut",
            animationDelay: function () {
              return Math.random() * 200;
            },
          },
        ],
      });
    },
  },
};
</script>

<style scoped lang="less">
#dashboard {
  display: flex;
  height: calc(100vh - 70px);
  align-items: center;
  justify-content: center;
}
</style>

注意：xAxis:{},yAxis:{}；必须要有，否则无法显示