标签：false show 样式 myChart color 柱状图 params true echarts

let option = {
  grid: {
    left: 10%,
    right:65,
    top:114,
    bottom:100,
  },
  xAxis : [
    {
      type : 'category',
　　　　//横向网格
      splitLine: {
        show: true,
        lineStyle: {
          color: '#e1e1e1',
        }
      },
      axisTick: {
        show: false
      },
　　　　//是否显示x轴线
      axisLine: {
        show: false,
        // lineStyle: {
        //     color: '#2A2A2A',
        // }
      },
　　　　//x轴字体设置
      axisLabel: {
        rotate: 0,
        show:true,
        textStyle: {
          fontSize: '22px',
          fontFamily: 'PingFang-SC-Medium',
          // padding: [5,0,0,0],
          color: '#000000'
        },
      },
      data : ['A区','B区','C区','D区','E区',"F区"],

    }
  ],
  yAxis : [
    {
      type : 'value',
      splitLine: {
        show: true,
        lineStyle: {
          color: '#e1e1e1',
        }
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: false,
        // lineStyle: {
        //     color: '#2A2A2A',
        // }
      },
      axisLabel: {
        show:true,
        textStyle: {
          fontSize: remToPx(22/75),
          fontFamily: 'PingFang-SC-Medium',
          color: '#838383'
        }
      }
    }
  ],
  series : [
    {
      type:'bar',
      data:[145,159,6,145,149,50],
      barWidth: remToPx(25/75),//柱子的宽度
      silent: true,
      itemStyle: {
        normal: {
          color: function(params) {
　　　　　　　　//设置默认某一行颜色以及点击之后颜色变化，颜色均为渐变色
            if (params.name === "B区" || checkName  === params.name) {
              return new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                offset: 0,
                color: "#f99b37" // 0% 处的颜色
              },
                {
                  offset: 1,
                  color: "#ffbb51" // 100% 处的颜色
                }], false)
            } else {
              return new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                offset: 0,
                color: "#1a79c9" // 0% 处的颜色
              },
                {
                  offset: 1,
                  color: "#46aafd" // 100% 处的颜色
                }], false)
            }

          },
          label: {
            show: true,
            position: 'top',
            // formatter: '{b}\n{c}'
            formatter: function(a){
              if(a.name == "B区"){
                return a.value+'%'
              }else{
                return a.value+'%'
              }
            }
          },
        },

      },
    }
  ]
};

const client = document.getElementById(id);
let myChart = echarts.init(client);

const clientWidth = client.clientWidth;
const clientHeight = client.clientHeight;
myChart.clear();
myChart.resize({width: clientWidth, height: clientHeight});
myChart.setOption(option);
myChart.on('click',function(params){
  //点击的柱子
  checkName = params.name;
  //柱形图重构
  myChart.setOption(option);
})

标签：false,show,样式,myChart,color,柱状图,params,true,echarts
来源： https://www.cnblogs.com/qing0228/p/13880615.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。