echarts机加图表实现

最新推荐文章于 2024-10-15 15:24:52 发布

小白鸽hc

最新推荐文章于 2024-10-15 15:24:52 发布

阅读量61

点赞数

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/weixin_47438730/article/details/135029884

版权


const labelSetting = {
  show: true,
  position: 'top',
  offset: [0, 0],
  fontSize: 12
};
const color = ['#fff','blue'];
let symbol = 'rect';
function makeOption(type) {
  return {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      
    },
    yAxis: {
      type: 'value',
      // inverse: true,
      splitNumber: 10,
      axisLine: { 
        show: true,
        length: 2000
        
      },
      
      splitLine:{show: false},
      axisTick: { show: false },
      axisLabel: {
        fontSize: 12,
        textStyle:{
          color: '#fff',
          fontWeight: 'bold'
        }
      },

    },
    tooltip: { show: false},
    xAxis: {
      type: 'category',
      data: ['1', '2', '3', '4', '5', '6', '7','8','9','10','11','12'],
      splitLine: { show: false },
      axisTick: { 
        show: true,
        alignWithLabel: true
      },
      axisLine: { 
        show: true,
        symbolOffset:[50,100],
      },
      axisLabel: {
        margin: '14',
        fontSize: 12,
        textStyle:{
          color: '#fff',
          fontWeight: 'bold'
        }
      },
    },
    series: [
      {
        name: '2015',
        type: 'pictorialBar',
        label: labelSetting,
        symbolRepeat: true,//使图形元素重复，即每个数据值用一组重复的图形元素表示
        symbolSize: ['150%', '40%'],//组分开表示宽和高
        barCategoryGap: '70%', //同一系列的柱间距离
        
        data: [
          {
            value: 5000,
            itemStyle: {
              color: color[0]
            },
            symbol
          },
          {
            value: 3000,
            itemStyle: {
              color: color[1]
            },
            symbol: symbol
          },
          {
            value: 2820,
            itemStyle: {
              color: color[0]
            },
            symbol: symbol 
          },
          {
            value: 4380,
            itemStyle: {
              color: color[1]
            },
            symbol: symbol
          },
          {
            value: 4080,
            itemStyle: {
              color: color[0]
            },
            symbol: symbol
          },
          {
            value: 5000,
            itemStyle: {
              color: color[1]
            },
            symbol: symbol
          },
          {
            value: 1879,
            itemStyle: {
              color: color[0]
            },
            symbol: symbol
          },
          {
            value: 3800,
            itemStyle: {
              color: color[1]
            },
            symbol: symbol
          },
          {
            value: 4500,
            itemStyle: {
              color: color[0]
            },
            symbol: symbol
          },
          {
            value: 2567,
            itemStyle: {
              color: color[1]
            },
            symbol: symbol
          },
          {
            value: 4456,
            itemStyle: {
              color: color[0]
            },
            symbol: symbol
          },
          {
            value: 3609,
            itemStyle: {
              color: color[1]
            },
            symbol: symbol
          }
        ]
      },
    ]
  };
}
const options = [
  makeOption('pictorialBar'),
];
var optionIndex = 0;
option = options[optionIndex];