柱变动图echarts pictorialBar配置项内容和展示

柱变动图显示上升下降趋势

      
var up='image://data:image/png;base64,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'    
var down = 'image://data:image/png;base64,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'
var same = 'image://data:image/png;base64,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'

var chartData = {
	timelineData: ['2018', '2019', '2020', '2021'], // 变量名修改
	seriesData: [
		{
			xdata: ['批发零售', '制造业', '商务服务', '居民服务'],
			ydata: [3,4,5,6],
			status: [up, up, down, down]
		}, // 2018
		{
			xdata: ['批发零售', '制造业', '商务服务', '居民服务'],
			ydata: [13,24,15,26],
			status: [down, up, up, down]
		}, // 2019
		{
			xdata: ['批发零售', '制造业', '商务服务', '居民服务'],
			ydata: [3,4,5,6],
			status: [up, down, up, down]
		}, // 2020
		{
			xdata: ['批发零售', '制造业', '商务服务', '居民服务'],
			ydata: [33,24,35,56],
			status: [up, down, down, up]
		} // 2021
	]
}
var optionVal = chartData.seriesData.map((item, index) => {
  return {
    // title: {
    //   text: this.chartData.timelineData[index] + '年'
    // },
    xAxis: {
      data: item.xdata
    },
    tooltip: {},
    series: [
      {
        name: "",
        type: 'pictorialBar',
        symbol: function(data,params){
            return item.status[params.dataIndex]
        },
        symbolSize: [20, 30],
        symbolOffset: [0, -40],
        color:'orange',
        symbolPosition: 'end',
        label: {
            show: true,
            position: "top",
            formatter:  function(params){
                return item.ydata[params.dataIndex]
            },
            fontSize: 30,
            fontWeight: 'bold',
            color: '#34DCFF'
        },
        data: item.ydata
      },
      {
        type: 'bar',
        data: item.ydata,
        barWidth: 60,
        itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1, // 从上到下变浅
                    [
                      { offset: 0, color: '#2d57f8' },
                      { offset: 1, color: '#4498f0' }

                    ], false
                  ),
                  opacity: 1
                }
              }
      }
    ]
  }
})
option = {
  baseOption: {
    timeline: {
      data: chartData.timelineData,
      axisType: 'category',
      autoPlay: true,
      playInterval: 1500,
    },
    title: {
      text: '',
      right: '2%',
      bottom: '8%',
      textStyle: {
        fontSize: 50,
        color: '#000'
      }
    },
    xAxis: {
      type: 'category'
    },
    yAxis: {
      type: 'value'
    }
  },
  options: optionVal
}