Vue中使用echarts水球图
Vue中使用echarts水球图首先,我们需要配置环境,需要下载echarts依赖和水球图依赖echarts-liquidfill1.你需要npm install 来下载他们,下面是代码:npm install echarts --savenpm install echarts-liquidfill --save2.待依赖安装完成,我们需要在main.js中注册它import Vue from '
·
Vue中使用echarts水球图
首先,我们需要配置环境,需要下载echarts依赖和水球图依赖echarts-liquidfill
1.你需要npm install 来下载他们,下面是代码:
npm install echarts --save
npm install echarts-liquidfill@2.0.6 --save
2.待依赖安装完成,我们需要在main.js中注册它
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 引入echarts
import * as echarts from 'echarts'
// 引入水球图
import 'echarts-liquidfill'
// 在vue全局绑定
Vue.prototype.$echarts = echarts
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
3.此时对环境的安装就完成了,接下来我们开始创建水球图图表吧,首先需要创建一个块元素来当作画布,注意:这个块元素必须要有宽高!!!
<div
:id="boxId"
:style="{ width: '400px', height: '300px' }"
></div>
4.然后在vue钩子函数mounted去调用函数,代码如下:
mounted() {
// 挂载后调用创建水球图函数
this.createWater()
},
data() {
return {
// 动态id,确保封装成组件后每个组件不受影响
boxId: 'Waterbox' + new Date().getTime(),
}
},
methods: {
// 方法
createWater() {
var myChart = this.$echarts.init(document.getElementById(`${this.boxId}`))
var option = {
title: {
text: '水球图',
left: this.WaterData.Left,
top: 10,
textStyle: {
color: '#333',
fontWeight: 'normal',
fontSize: 14
}
},
series: [
{
name: 'water echart',
type: 'liquidFill',
radius: '200px',
data: [0.6],
// 水球图中的水位,0-1之间,若想要多个波纹,可写多条数据[0.6, 0.5, 0.8],
// 如果想要不显示,可以设置label中的textStyle.fontSize为 0
label: {
normal: {
color: '#27e5f1',
insideColor: '#fff',
textStyle: {
fontSize: 40, // 此处设置为0时文字消失
fontWeight: 'bold'
}
}
},
color: [
{
type: 'linear',
x: 0,
y: 1,
x2: 0,
y2: 0,
colorStops: [
{
offset: 1,
color: ['#6a7feb'] // 0% 处的颜色
},
{
offset: 0,
color: ['#27e5f1'] // 100% 处的颜色
}
],
global: false // 缺省为 false
}
],
outline: {
show: true,
borderDistance: 5,
itemStyle: {
borderColor: '#27e5f1', // 水球图外边框的颜色
borderWidth: 3 // 水球图外边框的宽度
}
}
}
]
}
myChart.setOption(option)
}
},
更多配置项可以去官网查看echarts-liquidfill
我是卡卡罗特,一个写代码的设计师
更多推荐
已为社区贡献2条内容
所有评论(0)