vue中使用echarts记录属性3立体柱形图

环境：vue2 + element-ui

echarts版本：5.4.0

安装：

npm install echarts --save

需要的页面引用：

import * as echarts from 'echarts';

 先上一个效果图（有借鉴copy网上的内容，忘了哪个了）

页面准备容器

<div id="fftjChart"></div>

js部分，我是在父组件中拿到的数据，传递给子组件

<script>
import * as echarts from "echarts";
export default {
// 组件传参，拿到父组件传递的数据
  props: {
    greenTraffic: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      arrX: [],
      arrY: [],
    };
  },
  watch: {
// 侦听父组件的数据，发生变化后处理数据后重新渲染dom
    greenTraffic: {
      handler(val) {
        this.arrX = [];
        this.arrY = [];
        if (Array.isArray(val) && val.length) {
          val.forEach((item) => {
            this.arrX.push(item.trafficKey);
            this.arrY.push((Number(item.trafficValue) / 10000).toFixed(2));
          });
        }
        this.drawFftjChart();
      },
      deep: true,
    },
  },
  mounted() {
    this.drawFftjChart();
  },
  methods: {
    drawFftjChart() {
      let yData = this.arrY;
      var fftjChart = echarts.init(document.getElementById("fftjChart"));
      fftjChart.setOption({
        grid: { // 容器距离
          left: "5%",
          right: "5%",
          // top: "5%",
          bottom: "5%",
          containLabel: true,
        },
        tooltip: {
          trigger: "item",
          formatter: function (parms) {
            return (
              parms.marker + " " + parms.name + "：" + parms.value + "万辆"
            );
          },
        },
        xAxis: {
          type: "category", // category(坐标轴类型)
          data: this.arrX,
          axisTick: {
            // 坐标轴刻度相关配置
            show: true, // 是否显示坐标轴刻度
          },
          axisLine: {
            // 坐标轴轴线相关配置
            lineStyle: {
              // 坐标轴轴线样式
              color: "#666666", // 坐标轴轴线颜色
            },
          },
          axisLabel: {
            // 坐标轴刻度标签相关配置
            color: "#fff",
            fontSize: 14,
            margin: 20,
          },
        },
        yAxis: {
          type: "value", // value(数值轴,适用于连续数据)
          name: "单位：万辆",
          nameTextStyle: {
            color: "#fff",
            fontSize: 12,
          },
          axisTick: {
            // 坐标轴刻度相关配置
            show: true, // 是否显示坐标轴刻度
          },
          axisLine: {
            // 坐标轴轴线相关配置
            show: true, // 是否显示坐标轴轴线
          },
          axisLabel: {
            // 坐标轴刻度标签相关配置
            color: "#fff",
            fontSize: 14,
          },
          splitLine: {
            // 坐标轴在 grid 区域中的分隔线
            lineStyle: {
              // 分割线配置
              color: "rgba(255,255,255,0.15)", // 分割线颜色
            },
          },
        },
        series: [
          // 底部的椭圆形(象形柱图):pictorialBar
          {
            type: "pictorialBar", // pictorialBar(象形柱图)
            label: {
              // 图形上的文本标签,可用于说明图像的一些数据信息,比如值,名称等
              // show: true, //是否显示标签
              position: ["17", "-30"], // 标签的位置(可以是绝对的像素值或者百分比['50%','50%',也可以是top,left等])
              color: "#01E4FF",
              fontSize: 14,
            },
            symbolSize: [30, 20], // 图形的大小用数组分别比表示宽和高,也乐意设置成10相当于[10,10]
            symbolOffset: [0, 10], // 图形相对于原本位置的偏移
            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(31,155,255,1)",
                },
                {
                  offset: 1, // 100%处的颜色
                  color: "#1F61EA",
                },
              ]),
            },
            data: yData,
          },
          // 中间的长方形柱状图(柱状图):bar
          {
            type: "bar", // 柱状图
            barWidth: 30, // 柱条的宽度,不设时自适应
            barGap: "0%", // 柱子与柱子之间的距离
            itemStyle: {
              // 图形样式
              // color支持(rgb(255,255,255)、rgba(255,255,255,1)、#fff,也支持渐变色和纹理填充)
              // 下面就是使用线性渐变
              color: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                type: "linear",
                global: false,
                colorStops: [
                  {
                    offset: 0, // 0%处的颜色
                    color: "rgba(34,68,172,0.9)",
                  },
                  {
                    offset: 1, // 100%处的颜色
                    color: "rgba(0,183,255,0.8)",
                  },
                ],
              },
            },
            data: yData,
          },
          // 顶部的椭圆形(象形柱图):pictorialBar
          {
            type: "pictorialBar",
            symbolSize: [30, 20],
            symbolOffset: [0, -10],
            z: 12,
            symbolPosition: "end",
            itemStyle: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "rgba(31,155,255,0.8)",
                  },
                  {
                    offset: 1,
                    color: "rgba(0,229,255,0.5)",
                  },
                ],
                false
              ),
            },
            data: yData,
          },
        ],
      });
      window.addEventListener("resize", () => {
        fftjChart.resize();
      });
    },
  },
};
</script>

下一篇整理，3D饼状图

工作记录，有不足之处还请见谅，还望指出，感谢！