Echarts象形图简单示例

Echarts象形柱图（山峰图）简单应用

• 简单示例
  
• 代码详述

option = {
        title: {
          text: '年龄段',
          textStyle:{
              fontSize:14,
              color:'#444444',
              fontFamily: "Microsoft Yahei",
              fontWeight:'100'
          },
          x: 'center'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'none'
            },
            formatter: function (params) {
                return params[0].name + ': ' + params[0].value;
            }
        },
        xAxis: {
            data: ['驯鹿', '火箭', '飞机', '高铁', '轮船', '汽车', '跑步', '步行', ],
            axisTick: {show: false},
            axisLine: {show: false},
            axisLabel: {
                textStyle: {
                    color: '#444444'
                }
            }
        },
        yAxis: {
            splitLine: {show: false},
            axisTick: {show: false},
            axisLine: {show: false},
            axisLabel: {show: false}
        },
        color: ['#89DA4F','#FCC828','#8EC7F4','#CDCBEC','#14B961'],
        series: [{
            name: 'hill',
            type: 'pictorialBar',
            barCategoryGap: '0%',
            // symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
            symbol: 'path://path://M10 600 Q 95 0 180 600',
            label:{ 
                    normal:{ 
                      show: true, 
                      position: 'top',
                      formatter:'{c}%',
                    } 
                  },
            itemStyle: {
                normal: {
                    opacity: 0.5,
                    color: function (params){
                      var colorList = ['#89DA4F','#FCC828','#8EC7F4','#CDCBEC','#14B961','#E3E3E3'];
                      return colorList[params.dataIndex];
                    }
                },
                emphasis: {
                    opacity: 1
                }
            },
            data: [123, 60, 25, 18, 12, 9, 2, 1],
        }]
    };

注意事项
1. 替换
替换 option.xAxis.data=x;
option.series[0].data=y;（x,y分别是一个数组）
2. 属性值修改
依据特定的需求，对option对象的属性做相应的修改

象形图的多种示例