vue中绘制水球图(水波纹增长图,波纹型百分比)
vue中绘制水球图(水波纹增长图,波纹型百分比)1.在项目中安装 echarts 和 echarts-liquidfill 依赖npm i echarts -snpm i echarts-liquidfill -s2.在组件中引入需要的echarts和水球图插件import echarts from 'echarts'import 'echarts-liquidfill'若安装echarts5.0
·
1.在项目中安装 echarts 和 echarts-liquidfill 依赖
npm i echarts -s
npm i echarts-liquidfill -s
2.在组件中引入需要的echarts和水球图插件
import echarts from 'echarts'
import 'echarts-liquidfill'
若安装echarts5.0以上版本 引入方式如下
import * as echarts from 'echarts';
import 'echarts-liquidfill'
3.创建一个容器安置图形(设置好宽高)
<div style="width: 600px;height:400px;" ref='liquidEchart' ></div>
4.生成图表
initLiquidEchart(){
setTimeout(() => {
let myChart = echarts.init(this.$refs['liquidEchart'])
// 把配置和数据放这里
myChart.setOption({
title: {// 标题
text: '补贴资金剩余',
textStyle: {// 标题的样式
color: '#888', // 字体颜色
fontFamily: 'Microsoft YaHei', // 字体
fontSize: 24,
fontWeight: '400',
align: 'center', // 文字的水平方式
baseline: 'middle',
position: 'inside',
verticalAlign: 'middle'// 文字的垂直方式
},
left: 'center', // 定位
top: '20%'
},
series: [{
type: 'liquidFill',
radius: '95%',
waveAnimation: true,
data: [{
value: 0.5,
direction: 'left',
itemStyle: {
normal: {
color: '#1890ff'
}
}
}],
outline: {
// show: true , //是否显示轮廓 布尔值
borderDistance: 1, // 外部轮廓与图表的距离 数字
itemStyle: {
borderColor: '#1890ff', // 边框的颜色
borderWidth: 3 // 边框的宽度
// shadowBlur: 5 , //外部轮廓的阴影范围 一旦设置了内外都有阴影
// shadowColor: '#000' //外部轮廓的阴影颜色
}
},
itemStyle: {
opacity: 0.9, // 波浪的透明度
shadowBlur: 0 // 波浪的阴影范围
},
backgroundStyle: {
color: '#fff' // 图表的背景颜色
},
label: { // 数据展示样式
show: true,
color: '#000',
insideColor: '#fff',
fontSize: 24,
fontWeight: 400,
align: 'center',
baseline: 'middle',
position: 'inside'
}
}]
})
}, 1000)
}
实现效果:
附: Echarts 水球图教程 https://efe.baidu.com/blog/echarts-liquidfill-chart-tutorial/
问题记录:
若报 对象不支持“ensureState”属性或方法 错误(IE浏览器报此错),可切换插件匹配的版本
“echarts”: “^4.9.0”,
“echarts-liquidfill”: “^2.0.6”或
“echarts”: “^5.2.0”,
“echarts-liquidfill”: “^3.0.0”,该版本不会报错
安装对应版本插件的命令:npm i echarts@4.9.0 -s 或 npm i echarts-liquidfill@2.0.6 -s
更多推荐
已为社区贡献1条内容
所有评论(0)