nuxt按需引入echart，加载渐变色波纹水球图

1. 安装echart、echarts-liquidfill

npm install echarts --save
npm install echarts-liquidfill

2.在plugins文件中创建 echart.js

// 引入 ECharts 主模块
var echarts = require("echarts/lib/echarts");
import Vue from "vue";
// 引入仪表盘
require("echarts/lib/chart/gauge");
// 引入水球图
require("echarts-liquidfill");
// 引入提示框和标题组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
require('echarts/lib/component/graphic');
Vue.prototype.$echarts = echarts;

3.在nuxt.config文件中的 plugins 中添加该模块 { src: “~/plugins/echarts” }

  plugins: [
    { src: "~/plugins/filter" },
    { src: "~/plugins/axios" },
    { src: "~/plugins/components" },
    { src: "~/plugins/wechat" },
    { src: "~/plugins/element" },
    { src: "~/plugins/vue-jsonp" },
    { src: "~/plugins/echarts" }
  ],

4.demo代码

<template>
  <div style="width: 100%;height: 100%;background: blue;">
    <div id="main" style="width: 500px;height:500px"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  mounted() {
    var value = 0.3;
    var data = [value, value, value];
    var option = {
      backgroundColor: this.$echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [
        {
          offset: 0,
          color: "#431ab8"
        },
        {
          offset: 1,
          color: "#471bba"
        }
      ]),
      title: {
        text: (value * 100).toFixed(0) + "{a|%}",
        textStyle: {
          fontSize: 50,
          fontFamily: "Microsoft Yahei",
          fontWeight: "normal",
          color: "#bcb8fb",
          rich: {
            a: {
              fontSize: 28
            }
          }
        },
        x: "center",
        y: "35%"
      },
      graphic: [
        {
          type: "group",
          left: "center",
          top: "60%",
          children: [
            {
              type: "text",
              z: 100,
              left: "10",
              top: "middle",
              style: {
                fill: "#aab2fa",
                text: "流量统计",
                font: "20px Microsoft YaHei"
              }
            }
          ]
        }
      ],
      series: [
        {
          type: "liquidFill",
          radius: "80%",
          center: ["50%", "50%"],
          //  shape: 'roundRect',
          data: data,
          backgroundStyle: {
            color: {
              type: "linear",
              x: 1,
              y: 0,
              x2: 0.5,
              y2: 1,
              colorStops: [
                {
                  offset: 1,
                  color: "rgba(68, 145, 253, 0)"
                },
                {
                  offset: 0.5,
                  color: "rgba(68, 145, 253, .25)"
                },
                {
                  offset: 0,
                  color: "rgba(68, 145, 253, 1)"
                }
              ],
              globalCoord: false
            }
          },
          outline: {
            borderDistance: 0,
            itemStyle: {
              borderWidth: 20,
              borderColor: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(69, 73, 240, 0)"
                  },
                  {
                    offset: 0.5,
                    color: "rgba(69, 73, 240, .25)"
                  },
                  {
                    offset: 1,
                    color: "rgba(69, 73, 240, 1)"
                  }
                ],
                globalCoord: false
              },
              shadowBlur: 10,
              shadowColor: "#000"
            }
          },
          //  color:['#c23531','#2f4554'],
          label: {
            normal: {
              formatter: ""
            }
          },
          itemStyle: {
            normal: { // 水波渐变色
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 1,
                    color: "rgba(58, 71, 212, 0)"
                  },
                  {
                    offset: 0,
                    color: "rgba(31, 222, 225, 1)"
                  }
                ],
                globalCoord: false
              },
              shadowBlur: 0,
              shadowColor: "white"
            }
          }
        }
      ]
    };

    var myChart = this.$echarts.init(document.getElementById("main"));

    myChart.setOption(option, true);
    window.addEventListener("resize", function() {
      myChart.resize();
    });
  },
  methods: {},
  destroyed() {}
};
</script>
<style lang="stylus" scoped></style>
<style lang="stylus"></style>

5.效果图

附漂亮的水球图一张