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.效果图
附漂亮的水球图一张