全局eCharts图表

最新推荐文章于 2023-12-06 21:21:09 发布

码小生@是胡

最新推荐文章于 2023-12-06 21:21:09 发布

阅读量344

点赞数

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/weixin_58224449/article/details/127979196

版权

1、在components里面准备一个二charts.vue文件夹

<!--  -->
<template>
  <div class="Echarts" style="width: 100%; height: 100%">
    <div :id="chartId" :style="{ width, height }"></div>
  </div>
</template>

<script>
import 'echarts-liquidfill'
import { uuid } from '@/util/util'
export default {
  components: {},
  name: 'myChart',
  data() {
    return {
      chartId: uuid()
    };
  },
  created() {

  },
  props: {
    noData: {},
    option: {
      required: true
    },
    width: {
      default: '100%'
    },
    height: {
      default: '100%'
    }
  },
  watch: {
    option: {
      handler(v) {
        this.myEcharts()
      },
      deep: true
    }
  },
  mounted() {
    this.myEcharts();
  },
  methods: {
    myEcharts() {
      var myChart = this.$echarts.init(document.getElementById(`${this.chartId}`));
      myChart.setOption(this.option);
    }
  },
}
</script>
<style lang='scss' scoped>
.noData {
  display: flex;
  align-items: center;
  justify-content: center;
  .content {
    width: 100px;
    height: 100px;
  }
}
</style>

2,如果想在全局直接使用，就在main.js里面引用并挂载到全局，我的项目用到的地方比较少，我就直接在页面引用的

    <div class="icon_qie">
      <div class="accuracy">
        <div class="chartWra">
          <myChart :option="chartOption" />
        </div>
        <div class="infoWra">
          <div class="total">总量：2222</div>
          <div class="precent">城市平均准确率：77%</div>
        </div>
      </div>
    </div>


import myChart from '@/components/echarts/myChart.vue'

components: { detail, myChart }


chartOption: {
        grid: {
          top: 20,
          left: 150,
          bottom: 20,
        },
        title: {
          text: "1111",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          show: false,
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "50%",
            data: [
              { value: 1048, name: "Search Engine" },
              { value: 735, name: "Direct" },
              { value: 580, name: "Email" },
              { value: 484, name: "Union Ads" },
              { value: 300, name: "Video Ads" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      },