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

    记录自己的采坑之路,需要时方便查找
  • 相关阅读:
    搜索引擎的变化 【转载】
    转贴:Apache重负荷服务器应如何优化
    开源WebGIS系统构建工具集合
    linux命令大全
    英语新闻常用搜索引擎 【转载】
    转载王垠的《完全用GNU/Linux工作》!!!
    国内外搜索引擎论坛 【转载】
    刚刚申请的WebGIS应用QQ群,最大用户80,欢迎加入啊!
    转贴:用Apache反向代理设置对外的WWW和文件服务器
    sourceforge.net上的GeoServer的下载地址列表
  • 原文地址:https://www.cnblogs.com/hahahakc/p/14431854.html
Copyright © 2020-2023  润新知