echarts 渐变圆柱柱状图

最新推荐文章于 2024-07-23 11:06:08 发布

不吃糖的哼哼

最新推荐文章于 2024-07-23 11:06:08 发布

阅读量606

点赞数 10

分类专栏： echarts 文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/y13349887034/article/details/135413117

版权

echarts 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文详细描述了如何使用ECharts库在JavaScript中创建一个包含底层椭圆形象形柱图、中间长方形柱状图和顶部椭圆形象形柱图的数据可视化图表，展示了如何设置各个部分的样式和布局选项。

摘要由CSDN通过智能技术生成

在这里插入图片描述

 const options = {
        grid: {
          top: "20%",
          bottom: "12%",
        },
        tooltip: {},
        xAxis: {
          type: "category",
          data: ["石头村", "石城村", "杨堡村","黑石城", "曜石城", "王堡村"],
          axisLabel: {
            fontSize: 10, // 设置字体大小
            // x轴的文本颜色
            textStyle: {
              color: "#b5c6d6", // 就是颜色
            },
            margin:15// 顶部距离
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: true, // X轴 网格线 颜色类型的修改
            lineStyle: {
              color: "#336194",
            },
          },
        },
        yAxis: {
          name: "亩",
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#b5c6d6",
            },
          },
          axisLabel: {
            fontSize: 10, // 设置字体大小
            // x轴的文本颜色
            textStyle: {
              color: "#b5c6d6", // 就是颜色
            },
          },
          splitLine: {
            show: false, // X轴线 颜色类型的修改
            lineStyle: {
              color: "#94B8DC",
            },
          },
        },
        series: [
          // 底部的椭圆形(象形柱图):pictorialBar
          {
            type: "pictorialBar", // pictorialBar(象形柱图)
            symbolSize: [20, 10], // 图形的大小用数组分别比表示宽和高,也乐意设置成10相当于[10,10]
            symbolOffset: [0, 5], // 图形相对于原本位置的偏移
            z: 12, // 象形柱状图组件的所有图形的 z 值.控制图形的前后顺序.z 值小的图形会被 z 值大的图形覆盖.
            itemStyle: { // 图形样式
              // echarts.graphic.LinearGradient(echarts内置的渐变色生成器)
              // 4个参数用于配置渐变色的起止位置,这4个参数依次对应右 下 左 上
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                // offset: 0 1 ,表示从下往上的渐变色
                {
                  offset: 0, // 0%处的颜色
                  color: "rgba(1, 230, 250,1)"
                },
                {
                  offset: 1, // 100%处的颜色
                  color: "rgba(1, 230, 250,1)"
                }
              ])
            },
            data: [0, 0, 0, 0,0,0]
          },
          // 中间的长方形柱状图(柱状图):bar
          {
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(37, 122, 198, 0.2)'
            },
            type: 'bar', // 柱状图
            barWidth: 20, // 柱条的宽度,不设时自适应
            barGap: '0%', // 柱子与柱子之间的距离
            itemStyle: { // 图形样式
              color: {
                "x": 0,
                "y": 0,
                "x2": 0,
                "y2": 1,
                "type": "linear",
                "global": false,
                "colorStops": [{
                  "offset": 0, // 0%处的颜色
                  "color": "rgba(0, 103, 171,0.5)"
                }, {
                  "offset": 1, // 100%处的颜色
                  "color": "rgba(1, 230, 250,1)"
                }]
              }
            },
            data: [22,44,224,334,112,324]
          },
          // 顶部的椭圆形(象形柱图):pictorialBar
          {
            type: "pictorialBar",
            symbolSize: [20, 10],
            symbolOffset: [0, -5],
            z: 12,
            symbolPosition: "end",
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(21, 174, 242,0.5)"
                },
                {
                  offset: 1,
                  color: "rgba(1, 230, 250,1)"
                }
              ], false)
            },
            data: [22,44,224,334,112,324]
          }
        ]
      };