ve-liquidfill水球图数据显示异常 (vue的浮点数运算)

ve-liquidfill水球图数据显示异常

采用百度官网的代码

<template>
  <ve-liquidfill
    :data="chartData"
    background-color="#000"
    :settings="fillChartSettings">
  </ve-gauge>
</template>

<script>
  export default {
   
  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
1. 在Vue组件中使用ECharts-liquidfill插件 首先,我们需要在项目中安装ECharts和ECharts-liquidfill插件。可以通过npm命令来安装: ``` npm install echarts --save npm install echarts-liquidfill --save ``` 然后在Vue组件中引入ECharts和ECharts-liquidfill插件: ```javascript import echarts from 'echarts' import 'echarts-liquidfill' ``` 接下来,我们需要在Vue组件的mounted钩子中初始化ECharts表并设置option: ```javascript mounted() { // 初始化ECharts实例 const myChart = echarts.init(this.$refs.chart) // 设置option const option = { series: [{ type: 'liquidFill', data: [0.6, 0.5, 0.4, 0.3], radius: '70%', color: ['#00baff', '#00e3ff', '#00ffff', '#8cfffb'], label: { normal: { position: ['50%', '50%'], formatter: '{a|{b}}\n{hr|}\n{c|{c}}', rich: { a: { fontSize: 20, color: '#fff' }, hr: { borderColor: '#fff', width: '100%', borderWidth: 1, height: 0 }, c: { fontSize: 18, color: '#fff', padding: [3, 0] } } } } }] } myChart.setOption(option) } ``` 最后,在Vue组件的template中添加一个div元素来渲染ECharts表: ```html <template> <div ref="chart" style="height: 300px;"></div> </template> ``` 2. 在Vue指令中使用ECharts-liquidfill插件 除了在Vue组件中使用,我们还可以将ECharts-liquidfill插件封装成一个Vue指令,方便在多个组件中重复使用。首先,我们需要在项目中创建一个新的文件,例如liquidfill.js,并在其中引入ECharts和ECharts-liquidfill插件: ```javascript import echarts from 'echarts' import 'echarts-liquidfill' export default { inserted(el, binding) { const myChart = echarts.init(el) const option = { series: [{ type: 'liquidFill', data: [binding.value], radius: '70%', color: ['#00baff', '#00e3ff', '#00ffff', '#8cfffb'], label: { normal: { position: ['50%', '50%'], formatter: '{a|{b}}\n{hr|}\n{c|{c}}', rich: { a: { fontSize: 20, color: '#fff' }, hr: { borderColor: '#fff', width: '100%', borderWidth: 1, height: 0 }, c: { fontSize: 18, color: '#fff', padding: [3, 0] } } } } }] } myChart.setOption(option) } } ``` 然后,在Vue组件中引入并使用该指令: ```html <template> <div v-liquidfill="0.6" style="height: 300px;"></div> </template> <script> import liquidfill from './liquidfill.js' export default { directives: { liquidfill } } </script> ``` 这样就可以在多个Vue组件中重复使用该指令,而不需要重复编写ECharts-liquidfill插件的初始化和option设置。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值