Echarts可视化教程

  1. 网站首页
  2. 百度ECharts
  3. ECharts实例
  4. ECharts入门
  5. 地图大全
  6. ECharts官网

百度echarts柱状图通过环比数据展示(↑↓)

var data1 = [132, 324, 327, 452, 365, 145, 326];
var data2 = [7.2, -2.6, 4.7, -3.7, -5.4, -0.5, 3.4];
var up = 'path://M286.031,265l-16.025,3L300,223l29.994,45-16.041-3-13.961,69Z';
var down = 'path://M216.969,292l16.025-3L203,334l-29.994-45,16.041,3,13.961-69Z'
var path = [up,down,up,down,down,down,up]
option = {
  backgroundColor: "#0B1321",
  color: ['#3398DB'],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      splitLine: {
        show: false
      },
	  axisTick: {
        show: false
      },
	  axisLabel: {
	  	textStyle: {
	  	  color: '#a8abbb',
	  	  fontSize: 12
	  	}
	  },
	  axisLine: {
	  	lineStyle: {
	  	  color: '#6c7087'
	  	}
	  }
    }
  ],
  yAxis: [
    {
    type: 'value',
    splitLine: {
        show: false
      },
	  axisTick: {
        show: false
      },
	  axisLabel: {
	  	textStyle: {
	  	  color: '#a8abbb',
	  	  fontSize: 12
	  	}
	  },
	  axisLine: {
	  	lineStyle: {
	  	  color: '#6c7087'
	  	}
	  }
  }],
  series: [
    {
      "name": "",
      type: 'pictorialBar',
      symbol: function(data,params){
        return path[params.dataIndex]
      },
      symbolSize: [20, 30],
      symbolOffset: [0, -40],
      color:'orange',
      symbolPosition: 'end',
      label: {
        show: true,
        position: "top",
        formatter:  function(params){
          return data2[params.dataIndex]
        },
        fontSize: 30,
        fontWeight: 'bold',
        color: '#34DCFF'
      },
      data: data1
    },
    {
      name: '直接访问',
      type: 'bar',
      barWidth: '40%',
      data: data1
    }
  ]
};
点击展开全文

相关文章

  1. 百度Echarts饼图中间显示文字
  2. 百度echarts多图表联合效果图(饼图/柱状图)
  3. 百度echarts横向柱状图(显示百分比)
  4. 百度echarts全国飞行路线图
  5. 百度echarts柱状图动态排名实时变化