canvas 多柱形图，柱宽1（线）（在vue中使用）

最新推荐文章于 2024-08-15 14:53:09 发布

原创最新推荐文章于 2024-08-15 14:53:09 发布 · 698 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#canvas

S-demo 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何在Vue应用中利用canvas API创建柱状图，特别是实现柱宽为1像素的精细效果。通过实例代码，详细解析绘制过程及关键点。

效果：
在这里插入图片描述

<div id="echarts3" style="width:470px;height:400px"></div>
数据：
xData3: [
        '10月1日',
        '10月2日',
        '10月3日',
        '10月4日',
        '10月5日',
        '10月6日',
        '10月7日',
        '10月8日',
        '10月9日',
        '10月10日',
        '10月11日',
        '10月12日'
      ],
      legendData3: ['收入总额', '支出总额'],
      seriesList3: [
        {
          name: '收入总额',
          type: 'bar',
          barWidth: 1,// 设置柱形宽度
          data: [0, 0, 1, 0, 0, 1, 0, 0, 0, 2, 0, 0]
        },
        {
          name: '支出总额',
          type: 'bar',
          barWidth: 1,
          data: [1, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0]
        }
      ]

调用：
this.plantyLine('echarts3', this.legendData3, this.xData3, this.seriesList3, '交易金额')
方法：
plantyLine(eleId, legendData, xdata, seriesList, titleName) {
      let lineChart = echarts.init(document.getElementById(eleId), 'white')

      lineChart.showLoading() //开启loading
      let option = {
        title: { text: titleName,
          left: 'center'
        }, //标题
        tooltip: {}, //鼠标悬停
        legend: {
          data: legendData, //名称显示列表
          // selectedMode: "single",
          bottom: 'bottom'
        },
        xAxis: [
          {
            data: xdata,
            xAxisLabel: { rotate: 40, interval: 0 }
          }
        ],
        yAxis: {
          type: 'value',
          name: ''
          // nameLocation: 'start'
        }, //Y轴
        // series: this.seriesList //数据，若有多条数据，格式为：series:[{name: '',type:'line',data:'22'},{name: '',type: 'line',date: '11'}]，name和legend中的nameList对应，type为类型，data为数值，若需要折线换成曲线，加上smooth: true
        series: seriesList
      }
      lineChart.clear() //先清除图表
      lineChart.setOption(option, true) //再设置配置
      lineChart.hideLoading() //关闭loading
    }