echarts柱形图实现2.5D

山重水复疑无路

已于 2024-04-22 16:07:44 修改

阅读量276

点赞数 3

文章标签： echarts 前端 javascript

于 2024-04-22 15:47:38 首次发布

本文链接：https://blog.csdn.net/qq_39933787/article/details/138079701

版权

思路：使用markpoint

option = {
  title: {
    text: 'Rainfall vs Evaporation',
    subtext: 'Fake Data'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['Rainfall', 'Evaporation']
  },
  toolbox: {
    show: true,
    feature: {
      dataView: { show: true, readOnly: false },
      magicType: { show: true, type: ['line', 'bar'] },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  calculable: true,
  xAxis: [
    {
      type: 'category',
      // prettier-ignore
      data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: 'Rainfall',
      type: 'bar',
      data: [
        2.0,14.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 13.3
      ],
      markPoint: {
        silent: true,
        label: {show: false},
        symbol:'diamond',
        symbolSize: [45,10],
        itemStyle: {
          borderColor: '#000'
        },
        data: [
          {coord: ['Jan',2]},
          {coord: ['Feb',14.9]},
          {coord: ['Mar',7]},
          {coord: ['Apr',23.2]},
          {coord: ['May',25.6]},
        ]
      },
       markLine: {
        silent: true,
        // label: {show: false},
        // symbol:'diamond',
        // symbolSize: [45,10],
        // itemStyle: {
        //   borderColor: '#000'
        // },
        // data: [
        //   {coord: ['Jan',2]},
        //   {coord: ['Feb',14.9]},
        //   {coord: ['Mar',7]},
        //   {coord: ['Apr',23.2]},
        //   {coord: ['May',25.6]},
        // ]
      },
    },
  ]
};

option = {
  title: {
    text: 'Rainfall vs Evaporation',
    subtext: 'Fake Data'
  },
  legend: {
    data: ['Rainfall', 'Evaporation']
  },
  calculable: true,
  xAxis: [
    {
      type: 'category',
      // prettier-ignore
      data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: 'Rainfall',
      type: 'bar',
      data: [
        2.0,14.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 13.3
      ],
      markPoint: {
        silent: true,
        label: {show: false},
        symbol:'diamond',
        symbolSize: [45,10],
        itemStyle: {
          borderColor: '#000'
        },
        data: [
          {coord: ['Jan',2]},
          {coord: ['Feb',14.9]},
          {coord: ['Mar',7]},
          {coord: ['Apr',23.2]},
          {coord: ['May',25.6]},
        ]
      },
       markLine: {
        silent: true,
        label: {show: false},
        symbol: 'none',
        lineStyle: {
          type: 'solid',
          color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                    {offset: 0, color: 'rgba(0, 0, 0,1)'},
                    {offset: 1, color: 'rgba(0, 0, 0,0.5)'}
                  ]
                )
        },
        data: [{xAxis: 'Jan' },{xAxis: 'Feb' },{xAxis: 'Mar' },{xAxis: 'Apr' },]
      }
    },
  ]
};