03-echarts如何画立体柱状图

李析鸢

已于 2024-07-30 11:06:15 修改

阅读量5.5k

点赞数 42

CC 4.0 BY-SA版权

分类专栏： Echarts画图文章标签： echarts 前端 vue

于 2024-04-15 15:37:18 首次发布

本文链接：https://blog.csdn.net/jiuliangliang/article/details/137142666

本文详细介绍了如何使用ECharts库在Vue项目中创建并自定义立体柱状图，包括创建盒子、设置坐标、构建绘图方法，以及使用`renderItem`和`LinearGradient`实现渐变色效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、创建盒子

1、创建盒子

这是图形盒子和样式。

<template>
  <div class="MonitoringSensor">
    <div id="main"></div>
  </div>
</template>

<style scoped>
.MonitoringSensor {
   
   
  width: 500px;
  height: 500px;

  margin: 0 auto;
  background: rgb(24, 80, 169)
}

#main {
   
   

  height: 100%;
  width: 100%;
}
</style>

这一步做完页面中间会有一个蓝色的盒子，如下
在这里插入图片描述

2、初始化盒子（先绘制一个基本的二维柱状图的样式）

1、创建一个初始化图表的方法

  methods：{
   
   
     initChart () {
   
   }
   }

2、在mounted中调用这个方法

  mounted () {
   
   
    this.initChart()
  },

3、在方法中写options和绘制图形

注意：记得导入echarts，否则无法构建图表。

import * as echarts from 'echarts'

data () {
   
   
    return {
   
   
      chart: null
    }
  },

initChart () {
   
   
      this.chart = echarts.init(document.getElementById('main'));
      let options = null;
      options = {
   
   
        xAxis: {
   
   
          type: "category",
          data: ["苹果", "梨子", "香蕉"],
          axisLabel: {
   
   
            color: "#fff",
          },
        },

        yAxis: {
   
   
          type: "value",
          max: 200,
          axisLabel: {
   
   
            color: "#fff",
          },
          splitLine: {
   
   
            lineStyle: {
   
   
              color: "#222",
            },
          },
        },
        tooltip: {
   
   
          trigger: "axis",
        },
        series: [
          {
   
   
            type: "bar",
            data: [100, 50, 20],
            barWidth: 30,
          }