echarts 在markpoint气泡里显示的最大值加上单位

markPoint: {
            data: [
              { type: 'max', name: 'Max' },
              { type: 'min', name: 'Min' }
            ],
            label: {
              normal: {
                  formatter: function(param) {
                    return (param.data.value*100) + '%';
                  }
              }
            }
          }

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是使用 Vue3 和 ECharts 实现气泡图的示例代码: 首先,在你的项目中安装 echarts 和 vue-echarts: ``` npm install echarts vue-echarts@5 ``` 然后,创建一个 Vue 组件来渲染气泡图: ```vue <template> <div class="bubble-chart" ref="chart"></div> </template> <script> import { defineComponent } from 'vue' import { use } from 'echarts/core' import { CanvasRenderer } from 'echarts/renderers' import { ScatterChart } from 'echarts/charts' import { GridComponent, TooltipComponent } from 'echarts/components' import ECharts from 'vue-echarts' // 使用必要的组件和渲染器 use([CanvasRenderer, ScatterChart, GridComponent, TooltipComponent]) export default defineComponent({ components: { ECharts }, mounted() { this.renderChart() }, methods: { renderChart() { const chart = this.$refs.chart.echartsInstance chart.setOption({ title: { text: '气泡图' }, tooltip: { trigger: 'axis', showDelay: 0, axisPointer: { type: 'cross', lineStyle: { type: 'dashed', width: 1 } } }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: [ { type: 'value', scale: true } ], yAxis: [ { type: 'value', scale: true } ], series: [ { name: '气泡图', type: 'scatter', data: [ [10.0, 8.04, 10], [8.0, 6.95, 8], [13.0, 7.58, 13], [9.0, 8.81, 9], [11.0, 8.33, 11], [14.0, 9.96, 14], [6.0, 7.24, 6], [4.0, 4.26, 4], [12.0, 10.84, 12], [7.0, 4.82, 7], [5.0, 5.68, 5] ], symbolSize: function (data) { return Math.sqrt(data[2]) * 5 }, label: { show: true, formatter: function (param) { return param.data[2] }, position: 'top' }, itemStyle: { color: '#4372e6' } } ] }) } } }) </script> <style> .bubble-chart { height: 500px; } </style> ``` 在上面的示例代码中,我们使用了 ECharts 的 ScatterChart 组件来实现气泡图。在 series.data 中设置了气泡图的数据,其中每个点的数据由三个数值组成,分别表示 x 轴、y 轴坐标和气泡大小。通过 symbolSize 属性可以设置气泡的大小,通过 label 属性可以在气泡显示对应的数值。 最后,在你的页面中使用这个组件即可渲染气泡图: ```vue <template> <div> <bubble-chart /> </div> </template> <script> import BubbleChart from './BubbleChart.vue' export default { components: { BubbleChart } } </script> ```

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值