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) }) }) } },

    记录自己的采坑之路,需要时方便查找
  • 相关阅读:
    USB子系统gadget analyse
    关于嵌入式的学习和职业发展
    编译JNI动态库so
    Linux串口编程
    i2c_get_clientdata和to_i2c_client 的使用获取平台设备
    Kbuild 编译系统分析
    解决QPST 出现的 "服务器正在运行" 的 下载错误.
    Msm 高通平台配置记录之一
    USB Skeleton driver 分析记录
    网站应用数据库相关 过滤类
  • 原文地址:https://www.cnblogs.com/hahahakc/p/14431854.html
Copyright © 2011-2022 走看看