Vue中ECharts“一脸懵逼”到“头脑清晰”

很多小伙伴在了解 ECharts的时候,都是在学js阶段的,但是在工作中需要用到这个东西的时候,发现这个东西在Vue框架里面怎么用啊,当场懵逼,原地爆炸,今天我就带小伙伴们了解一下

1.引入ECharts

npm install echarts --save
// 或者简写为
npm npm i echarts -S

🎇将 Echarts 引入到项目中，然后在mian.js中进行全局引入并将其挂载到vue的原型中

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

2.创建一个容器来装Echarts图

<div style="width:100px;height:100px" id="myCharts"></div>

🎃这里使用了div盒子,长宽分别为100px,这里我用 id 来进行获取

3.使用

//盒子
<div ref="myChart" style="width:100%;height:520px" id="myChart"></div>
<script>
mounted() {
    this.setMyEchart();
  },
  methods: {
      setMyEchart() {
      this.myChart = this.$echarts.init(document.getElementById('myChart'))
            var option = {
        title: [
          {
            text: data.title,
            x: "center",
            // y: "center",
            top: "50%",
            textStyle: {
              color: "#FFFFFF",
              fontWeight: "400",
              fontSize: this.fontSize(0.16),
            },
          },
          {
            text: data.num,
            x: "center",
            // y: "center",
            top: "37%",
            textStyle: {
              color: "#ffffff",
              fontWeight: "600",
              fontSize: this.fontSize(0.22),
            },
          },
        ],
        dataset: {
          source: data.data,
        },
        series: [
          {
            type: "pie",
            color: ["#01FFFF", "#2D7EE7"],
            label: {
              position: "outer",
              color: "#fff",
              fontSize: this.fontSize(0.12),
              formatter: `{b}\n{d}%`,
              extraCssText: "text-align: center;",
            },
            itemStyle: {
              borderWidth: 5, //设置border的宽度有多大
              // borderColor:'#fff',
            },
            labelLine: {
              show: true,
              smooth: true,
              length: 5,
              length2: 5,
            },
            radius: ["50%", "65%"],
          },
        ],
      };
      this.myChart.setOption(option);
       }
 }
</script>

🧨总结

其实他的难点在于各种配置项需要你去找,简单的使用呢我总结为 点

1.在项目中下载ECharts

2.引入ECharts

3.准备一个盒子来装ECharts图例

4.在methods里面获取到这个盒子

5.在methods里面声明一个对象来装配置项

6.调用一下这个函数