Vue前端柱状图实例(叠状条形图)

目录

• vue前端柱状图(叠状条形图)
• 效果图
• vue echarts柱状图自定义formatter
• echarts双柱状图自定义tooltip
• 总结

vue前端柱状图(叠状条形图)

通过echarts来实现柱状图的效果，echarts是针对数据报表等展现的一个产品，具体了解看官方网站：Echarts官网，在这个官网中有详细教程以及API，很容易入手Echarts，从个人刚学习Echarts图表来看，它的难度在于它有自己的一套属性，这和我们平时用的css是不同的，因而我们需要什么效果就得去遵守它的属性，去识别图表的各个部分的专业名称，才能从它API中获取相应属性去实现你想要效果。

效果图

代码：

vue echarts柱状图自定义formatter

echarts双柱状图自定义tooltip

zhuDouble() {
      var myChart = echarts.init(document.getElementById('echartsId'))
      window.addEventListener('resize', function () {
        myChart.resize()
      })
      myChart.setOption({
        legend: {
          left: 'center',
          bottom:'3%',
          icon: 'circle',
          data: ['Forest', 'Steppe'],
          textStyle: {
            fontSize: 12,
            color: '#8C8C8C'
          }
        },
        xAxis: {
          type: 'category',
          axisTick: {
            show: false // 去掉x轴 小细条
          },
          data: ['2018', '2019', '2020', '2021', '2022'],
          axisLabel: {
            width: 30,
            overflow: "breakAll",
            fontSize: 11,
          },
        },
        grid: {
          left: '5%',
          right: '8%',
          bottom: '12%',
          top: '8%',
          containLabel: true,
        },
        color: ['#3372FF', '#21C9E6'],
        yAxis: {
          type: 'value'
        },
        tooltip: {
          trigger: 'item', 
          formatter:function(params){
            let tip = '';
            tip += '
总数' + 23 + '
'+ params.seriesName + '数量' + params.value +'所
'
            return tip
          },
          borderColor: "rgba(255, 255, 255, 1)"
        },
        series: [
        {
	      name: 'Forest',
	      type: 'bar',
	      data: [320, 332, 301, 334, 390]
	    },
	    {
	      name: 'Steppe',
	      type: 'bar',
	      data: [220, 182, 191, 234, 290]
	    },
      })
    }

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。