zoukankan      html  css  js  c++  java
  • echarts 内容显示值在图中显示,不显示交互效果,只是静态图

        

    解决方案:可以使用formatter函数去结局,代码如下:

     

    series: [
                    {
                      name: '',
                      type: 'pie',
                      radius: ['50%', '85%'],
                      avoidLabelOverlap: false,
                      label: {
                        // show: false,
                        // position: 'center',
                        normal: {
                          show: true,
                          // formatter: '{c}',
                          position: 'inside',
                          color: '#fff',
                          formatter: function(params) {
                            let res = ''
                            if (params.value == '0') {
                              params.value = ''
                            }
                            return params.value
                          }
                        }
                      },
    loadCompAlertEchart() {
          if (this.companyList.length > 0) {
            this.$nextTick(() => {
              this.companyList.forEach((company, index) => {
            // 颜色显示
                const arrShow = [
                  { name: 'Off-line < 5 mins ', value: company.less_count, itemStyle: {color: '#E6A23C'}},
                  { name: 'Off-line > 5 mins ', value: company.more_count, itemStyle: {color: '#F56C6C'} },
                  { name: 'On-line reader ', value: parseInt(company.reader_count - company.offline_reader_count), itemStyle: {color: '#67C23A'} }
                ]
                const currentCompObj = {
                  tooltip: {
                    show: false,
                    trigger: 'item',
                    formatter: '{b}: {c}',
                    confine: true,
                    extraCssText: 'font-size: 7px'
                  },
                  series: [
                    {
                      name: '',
                      type: 'pie',
                      radius: ['50%', '85%'], // 控制饼图的宽度
                      avoidLabelOverlap: false,
                      label: {
                        // show: false,
                        // position: 'center',
                        normal: {
                          show: true,
                          // formatter: '{c}',
                          position: 'inside',
                          color: '#fff',
                          formatter: function(params) {
                            let res = ''
                            if (params.value == '0') {
                              params.value = ''
                            }
                            return params.value
                          }
                        }
                      },
                      // emphasis: {
                      //   label: {
                      //     show: false,
                      //     fontSize: '30',
                      //     fontWeight: 'bold',
                      //     color: '#fff'
                      //   }
                      // },
                      labelLine: {
                        show: false
                      },
                      // color: ['#CECECE', '#3BA0FF'],
                      data: arrShow,
              // 不显示交互效果,鼠标放上去pie图是静态的 hoverAnimation:
    false } ] }; const currentCompChart = Echarts.init( document.getElementById(company.identifier) ); currentCompChart.setOption(currentCompObj) }) }) } },

    记录自己的采坑之路,需要时方便查找
  • 相关阅读:
    vue excel 二进制文件导出
    小程序 input 批量监听
    vue-cli3 环境配置
    vue 同一浏览器只允许登录一个账号的解决办法
    vue ueditor 百度富文本
    视频分享
    vue、react、mpvue、node、ng视频教程以及项目
    【转】 值得推荐的C/C++框架和库 (真的很强大)
    C# 验证过滤代理IP是否有效
    【转】 C#学习笔记14——Trace、Debug和TraceSource的使用以及日志设计
  • 原文地址:https://www.cnblogs.com/hahahakc/p/14431854.html
Copyright © 2011-2022 走看看