+-
首页 专栏 vue.js 文章详情
关注作者
关注作者
1
echarts实现渐变矩形水球图
阿彤 发布于 2 月 3 日
1. 下载echarts和echarts-liquidfill
npm install echarts --save
npm install echarts-liquidfill
2. main.js
import * as echarts from 'echarts'
import 'echarts-liquidfill'
Vue.prototype.$echarts = echarts
3. html
<div class="chart-box">
<div class="liquidFill" ref="liquidFill"></div>
</div>
4. css
.chart-box {
width: 45px;
height: 120px;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: #061633;
.liquidFill {
width: 100%;
height: 100%;
}
}
5. js
export default {
mounted () {
this.draw(0.6)
},
methods: {
draw (data) {
const chart = this.$echarts.init(this.$refs.liquidFill)
const dataOption = {
value: data,
itemStyle: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(128, 255, 165)'
}, {
offset: 1,
color: 'rgba(1, 191, 236)'
}])
}
}
const option = {
series: [
{
type: 'liquidFill',
shape: 'rect',
radius: 120,
amplitude: '8%', // 振幅
data: [dataOption, dataOption],
backgroundStyle: {
color: 'rgba(255, 255, 255, 0)'
},
outline: {
show: false
},
label: {
normal: {
show: false,
formatter: ''
}
}
}
]
}
chart.setOption(option)
}
}
6. 最终实现效果
echarts vue.js
阅读 48 发布于 2 月 3 日
赞1
收藏
分享
本作品系原创, 采用《署名-非商业性使用-禁止演绎 4.0 国际》许可协议
阿彤
1 声望
1 粉丝
0 条评论
得票 时间
提交评论
阿彤
1 声望
1 粉丝
宣传栏
目录
▲
1. 下载echarts和echarts-liquidfill
npm install echarts --save
npm install echarts-liquidfill
2. main.js
import * as echarts from 'echarts'
import 'echarts-liquidfill'
Vue.prototype.$echarts = echarts
3. html
<div class="chart-box">
<div class="liquidFill" ref="liquidFill"></div>
</div>
4. css
.chart-box {
width: 45px;
height: 120px;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: #061633;
.liquidFill {
width: 100%;
height: 100%;
}
}
5. js
export default {
mounted () {
this.draw(0.6)
},
methods: {
draw (data) {
const chart = this.$echarts.init(this.$refs.liquidFill)
const dataOption = {
value: data,
itemStyle: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(128, 255, 165)'
}, {
offset: 1,
color: 'rgba(1, 191, 236)'
}])
}
}
const option = {
series: [
{
type: 'liquidFill',
shape: 'rect',
radius: 120,
amplitude: '8%', // 振幅
data: [dataOption, dataOption],
backgroundStyle: {
color: 'rgba(255, 255, 255, 0)'
},
outline: {
show: false
},
label: {
normal: {
show: false,
formatter: ''
}
}
}
]
}
chart.setOption(option)
}
}