echart基本折线图/柱状图示例

已于 2024-10-14 17:23:34 修改
阅读量3.1k 收藏 2
点赞数 1
分类专栏： vue页面 文章标签： echarts javascript ecmascript
于 2022-07-18 09:51:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zongzi494/article/details/125840857
版权

1.多色渐变柱状图

在这里插入图片描述

this.Wtlxzb.xAxis = ["巡杳上报", '公众投诉', '平台报警', '领导下发', '热线', '其他'];
this.Wtlxzb.yAxis = [15, 20, 30, 28, 29, 33, 44];
this.Wtlxzb.refresh = Math.random();

<template>
  <div ref="echarts"
       style="width:100%;height:100%;"
       class="heights"></div>
</template>
<script>
import * as echarts from "echarts";

export default {
  props: {
    // x轴数据
    xAxis: {
      type: Array,
      default: () => {
        return []
      }
    },
    // y轴数据
    yAxis: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 刷新
    refresh: {
      type: Number
    }
  },
  data () {
    return {
      chart: null,
    };
  },
  watch: {
    refresh () {
      if (this.chart) {
        this.chart.dispose();
        this.chart = null;
      }
      this.initChart();
    },
  },
  mounted () {
    this.initChart();
    window.addEventListener("resize", this.resizeChart);
  },
  methods: {
    //初始化图表
    initChart () {
      this.chart = echarts.init(this.$refs.echarts);
      let option = {
        // color: ["#ab2b46", "#7c00ff", "#4cabce",],
        // legend: {
        //   // itemGap: 5
        //   itemStyle: {
        //     color: 'inherit',
        //   },
        //   textStyle: {
        //     color: "auto"
        //   },
        //   itemWidth: 15,
        //   itemHeight: 15,
        // },
        tooltip: {
          trigger: "axis",
          // formatter: "{b}：{c}件",
          // formatter: "{b}：{c}",
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
          },
          axisPointer: {
            type: "cross",
            textStyle: {
              color: "#fff"
            }
          },
        },
        grid: {
          top: 50,
          bottom: 50,
        },
        xAxis: [
          {
            type: "category",
            axisLine: {
              lineStyle: {
                width: 2,
                color: "#2A384D",
              }
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              color: "#7794C3",
              fontSize: 14,
              fontFamily: "AlibabaPuHuiTi",
            },
            data: this.xAxis,
          }
        ],
        yAxis: [
          {
            type: "value",
            // name: "件",
            nameTextStyle: {
              align: "right",
              color: "#7794C3",
              fontSize: 14,
              fontFamily: "AlibabaPuHuiTi",
              padding: [0, 8, 0, 0],
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
                color: "#2A384D",
              }
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false
            },
            min: 0,
            splitNumber: 4,
            minInterval: 1,
            axisLabel: {
              color: "#7794C3",
              fontSize: 12,
              fontFamily: "AlibabaPuHuiTi",
              formatter: function (value) {
                let texts = [];
                if (value === 0) {
                  texts.push("00");
                } else {
                  texts.push(value);
                }
                return texts;
              }
            },
          }
        ],
        dataZoom: [
          {
            show: true,
            // show: false,
            height: 4,
            bottom: 18,
            start: 10,
            end: 80,
            handleSize: '100%',
            fillerColor: "#94FA41",
            borderColor: "transparent",
            backgroundColor: "rgba(148, 250, 65, 0.2)",
            handleStyle: {
              color: "#94FA41",
            },
            moveHandleSize: 0,
            textStyle: {
              color: "#fff"
            },
          },
          {
            type: "inside",
            show: true,
            height: 15,
            start: 1,
            end: 35
          }
        ],
        series: [
          {
            name: '数量',
            type: "bar",
            barWidth: 12,
            itemStyle: {
              borderRadius: [6, 6, 0, 0],

              color: function (params) {
                var colorList = [
                  ['#023464', '#007EF2'],
                  ['#5e1929', '#E8395D'],
                  ['#025760', '#00D7E9'],
                  ['#320367', '#7B00FD'],
                  ['#025105', '#00C800'],
                  ['#4f5256', '#FFE899'],
                  ['#4f5256', '#83FFE9']
                ];

                var colorItem = colorList[params.dataIndex];
                return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: colorItem[0],
                  },
                  {
                    offset: 1,
                    color: colorItem[1],
                  }
                ], false);
              }

              // color: function(params) {
              //   	//注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
              //       var colorList = ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622'];
              //       return colorList[params.dataIndex]
              //   }
            },
            // showBackground: true,
            backgroundStyle: {
              color: "transparent",
              borderWidth: 1,
              borderColor: "rgba(148, 250, 65, 0.2)",
            },
            data: this.yAxis,
          },
        ]
      };
      this.chart.setOption(option);
    },
    resizeChart () {
      if (this.chart) {
        this.chart.resize();
      }
    }
  },
  destroyed () {
    if (this.chart) {
      this.chart.dispose();
    }
  }
};
</script>

<style lang="scss">
.heights {
  min-width: 532px;
}
</style>

2.多色折线图

在这里插入图片描述

chartInfo: {
    refresh: 1,
    DataName: '',
    XAxis: ["溢流口1", "溢流口2", "溢流口3", "溢流口3", "溢流口4"],
    typeName: '1',
    typeName2: '2',
    YAxis: [0, 1, 6, 3, 4],
    YAxis2: [4, 2, 33, 4, 1, 5],
    loading: false
  },

<template>
  <!-- <div style="width: 100%; height: 100%" ref="lineChart" class="heightclass"></div> -->
  <div style="width:100%; height:100%">
    <div class="chartname">{{DataName}}</div>
    <div ref="lineChart" class="heightclass"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  props: {
    //x轴数据
    XAxis: {
      type: Array,
      default: () => []
    },
    //y轴数据
    YAxis: {
      type: Array,
      default: () => []
    },
    YAxis2: {
      type: Array,
      default: () => []
    },
    //名字
    DataName: {
      type: String,
    },
    //类型
    typeName: {
      type: String,
      default: '1'
    },
    typeName2: {
      type: String,
      default: '2'
    },
    //刷新
    refresh: {
      type: Number
    }
  },
  data () {
    return {
      chart: null
    }
  },
  mounted () {
    this.initChart();
    window.addEventListener("resize", this.resizeChart);
  },
  watch: {
    refresh () {
      if (this.chart) {
        this.chart.dispose();
        this.chart = null;
      }
      this.initChart();
    }
  },
  methods: {
    //初始化图表
    initChart () {
      this.chart = echarts.init(this.$refs.lineChart);

      let that = this

      let option = {
        color: ["#00C800", "#3effbd"],
        // tooltip: {
        //   trigger: 'axis',
        //   formatter: function (params) {
        //     let typeName = that.typeName
        //     let typeName2 = that.typeName2

        //     // console.log('params', params);
        //     return `地点 ：${params[0].name}<br>${typeName}：${params[0].value}mm<br>${typeName2}：${params[1].value}m`;
        //     // return `时间：${params[0].name}<br>${typeName}：${params[0].value}mm`;

        //   },
        //   axisPointer: {
        //     type: 'cross'
        //   },
        //   textStyle: {
        //     color: '#fff',
        //     fontStyle: 'normal',
        //     fontFamily: '微软雅黑',
        //     fontSize: 12,
        //   },
        //   // backgroundColor: "transparent",
        //   backgroundColor: "#071a41",
        // },

        tooltip: {
          trigger: "axis",
          // formatter: "{b}：{c}件",
          // formatter: "{b}：{c}",
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
          },
          axisPointer: {
            type: "cross",
            textStyle: {
              color: "#fff"
            }
          },
        },

        grid: {
          top: '18%',
          left: '3%',
          right: '3%',
          bottom: '12%',
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: this.XAxis,
            axisPointer: {
              type: "shadow",
            },
            axisLabel: {
              show: true,
              color: "#b5b5b5", //灰色

            },
            axisLine: {
              lineStyle: {
                // color: "#3398DB"  //蓝色
                color: "#b5b5b5", //灰色

              },
            },
          },
        ],
        yAxis: [
          {
            // name: '降雨量',
            type: "value",
            axisLabel: {
              show: true,
              // color: "#00C800", // 绿色
              color: "#b5b5b5", //灰色

            },
            axisLine: {
              lineStyle: {
                color: "#b5b5b5", //灰色
                // color: "#00C800", // 绿色
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: 'rgba(61,91,98,0.8)',

                // color: "#00C800", // 绿色

                // type: "dashed"  //虚线
              }
            }
          },
          {
            inverse: true,  //控制x轴在上方
            // name: '河道水位',
            type: "value",
            axisLabel: {
              show: true,
              // color: "#3effbd"
              color: "#b5b5b5",

            },
            axisLine: {
              lineStyle: {
                color: "#3398DB", // 颜色

                // color: "#00C800", // 颜色

              },
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: 'rgba(61,91,98,0.8)',
                type: "dashed"
              }
            }
          },
        ],
        dataZoom: [
          {
            show: true,
            // show: false,
            height: 4,
            bottom: 18,
            start: 10,
            end: 80,
            handleSize: '100%',
            fillerColor: "#94FA41",
            borderColor: "transparent",
            backgroundColor: "rgba(148, 250, 65, 0.2)",
            handleStyle: {
              color: "#94FA41",
            },
            moveHandleSize: 0,
            textStyle: {
              color: "#fff"
            },
          },
          {
            type: "inside",
            show: true,
            height: 15,
            start: 1,
            end: 35
          }
        ],
        series: [
          {
            smooth: true,//变为曲线 默认false折线
            name: '降雨量',
            type: "line",
            data: this.YAxis,
          },
          {
            smooth: true,//变为曲线 默认false折线
            name: '河道水位',
            type: "line",
            // yAxisIndex: 1,
            data: this.YAxis2,
          },
        ]
      };
      this.chart.setOption(option);
    },
    resizeChart () {
      if (this.chart) {
        this.chart.resize();
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.heightclass {
  min-height: 180px;
  min-width: 540px;

  // height: calc(100% - 40px);
  height: 100%;
  width: 100%;
}
</style>

3.饼状图/多色渐变柱状图

在这里插入图片描述

   this.chartInfo2.data = [
          { value: '0', name: '已处理', },
          { value: '0', name: '未处理', },
        ]
        this.chartInfo2.total = 0

<template>
  <div ref=""
       class="heightclass"
       style="width: 100%; height: 100%">
  </div>
</template>

<script>
// import * as echarts from "echarts";
// import { guid } from "../util/utils";


export default {
  props: {
    width: {
      type: String,
      default: '100%',
    },
    height: {
      type: String,
      default: '100%',
    },
    chartData: {
      type: Object,
      default: () => {
        return {}
      },
    },
    //刷新
    refresh: {
      type: Number
    }
  },
  data () {
    return {
      chart: null,
      data: {},
    }
  },
  watch: {
    // chartData: {
    //   deep: true,
    //   handler () {
    //     this.initChart()
    //   },
    // },

    refresh () {
      if (this.chart) {
        this.chart.dispose();
        this.chart = null;
      }
      this.initChart();
    }
  },
  mounted () {
    // console.log(this.chartData)
    this.initChart()
    window.addEventListener("resize", this.resizeChart);
  },
  methods: {
    initChart () {
      this.chart = this.$echarts.init(this.$el, 'dark')
      this.chart.setOption({
        color: ["#015aaa", "#4edaf9", "#fd8258",],
        title: {
          show: true,
          text: '全部',
          // 这是总量，从后端获取数据
          subtext: this.chartData.total,
          top: '35%',
          left: '69%',
          textAlign: 'center',
          z: 0,
          textStyle: {
            fontSize: '14',
            fontWeight: 'bold'
          },
          subtextStyle: {
            fontSize: '20',
            fontWeight: 'bold'
          }
        },
        tooltip: {
          show: false,
          trigger: 'item',
          alwaysShowContent: true,
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          y: 'center',    //延Y轴居中
          x: 'left', //居右显示  
          align: 'left', //图例控制在左边
          padding: [
            0, // 上
            200, // 右
            0, // 下
            20, // 左
          ],
          itemWidth: 0.1,
          itemHeight: 0.1,


          itemStyle: {
            // opacity: 0
            // icon: ''
          },

          itemHeight: 15,
          formatter: (name) => {
            // var index = 0
            // var clientlabels = this.chartData.name
            // var clientcounts = this.chartData.value
            // clientlabels.forEach(function (value, i) {
            //   if (value == name) {
            //     index = i
            //   }
            // })
            // let res

            // if (name) {
            //   // res = '{another|' + clientcounts[index] + '}' + '' + name
            //   res = `${clientcounts[index]} ${name}`
            // }

            // return res
            let legenTile = name + ' '

            for (const item of this.chartData.data) {
              if (name === item.name) legenTile += item.value
            }

            return legenTile
          },
          textStyle: {
            color: 'auto',
            rich: {
              another: {
                fontSize: 28,
              },
            },
            fontSize: 22,
          },
        },
        backgroundColor: 'rgba(0, 20, 70, 0)', //背景色
        series: [
          {
            name: '案件统计',
            type: 'pie',
            radius: [50, 60],
            center: ['70%', '50%'],
            legendHoverLink: false,
            avoidLabelOverlap: false,
            textAlign: 'center',
            label: {
              // 此处重点，设置为显示
              show: false,
              position: 'center',
              formatter: '{b}\n{c}',
              align: 'center',
              verticalAlign: 'middle',
              // 此处重点，字体大小设置为0
              textStyle: {
                fontSize: '0'
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '20',
                  fontWeight: 'bold'
                },
                // 同步样式
                formatter: function (params) {
                  return `{tTitle|${params.name}}\n{tSubTitle|${params.value}}`
                },
                rich: {
                  tTitle: {
                    fontSize: '14',
                    fontWeight: 'bold',
                    lineHeight: '25'
                  },
                  tSubTitle: {
                    fontSize: '20',
                    fontWeight: 'bold',
                    lineHeight: '25'
                  }
                }
              },
            },
            // roseType: 'area',
            // itemStyle: {
            //   borderRadius: 8,
            // },

            // itemStyle: {
            //   borderRadius: 20,
            //   borderColor: '#0014462e',
            //   borderWidth: 2,
            // },
            data: this.chartData.data,
          },
        ],
      })

      this.chart.dispatchAction({
        type: 'showTip',
        // 系列的 index，在 tooltip 的 trigger 为 axis 的时候可选。
        seriesIndex: 0,
        // 数据的 index，如果不指定也可以通过 name 属性根据名称指定数据
        dataIndex: 0,
        // 可选，数据名称，在有 dataIndex 的时候忽略
        // name: string,
        // 本次显示 tooltip 的位置。只在本次 action 中生效。
      })

      this.chart.on('mouseover', { seriesName: '案件统计' }, params => {
        this.chart.setOption({
          title: {
            show: false
          }
        })
      })

      this.chart.on('mouseout', { seriesName: '案件统计' }, params => {
        this.chart.setOption({
          title: {
            show: true
          }
        })
      })



      //   setTimeout(() => {
      //     chart.dispatchAction({
      //       type: 'legendSelect',
      //       // 图例名称
      //       name: '氨氮',
      //     })
      //   },1000)
    },
    resizeChart () {
      if (this.chart) {
        this.chart.resize();
      }
    }
  },
}
</script>

<style lang="scss" scoped>
p {
  // line-height: 60px;
  // text-align: center;
  // color: rgba(255, 255, 255, 0);
}

.heightclass {
  min-height: 150px;
}

.center-flex {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  color: #015aaa;
  text-align: center;
}
</style>

下面是多色渐变柱状图

 this.wfajEchart.xAxis = ['无']
 this.wfajEchart.yAxis = [
  { name: '无', values: '0' }
];
this.wfajEchart.refresh = Math.random();

<template>
  <div ref="echarts"
       style="width:100%;height:100%;"></div>
</template>
<script>
import * as echarts from "echarts";

export default {
  props: {
    // x轴数据
    xAxis: {
      type: Array,
      default: () => {
        return []
      }
    },
    // y轴数据
    yAxis: {
      type: Array,
      default: () => {
        return []
      }
    },

    // 刷新
    refresh: {
      type: Number
    }
  },
  data () {
    return {
      chart: null,
    };
  },
  watch: {
    refresh () {
      if (this.chart) {
        this.chart.dispose();
        this.chart = null;
      }
      this.initChart();
    },
  },
  mounted () {
    this.initChart();
    window.addEventListener("resize", this.resizeChart);
  },
  methods: {
    //初始化图表
    initChart () {
      this.chart = echarts.init(this.$refs.echarts);
      let option = {
        color: ["#ab2b46", "#7c00ff", "#4cabce",],
        legend: {
          // data: ['防坠网缺失', '管网渗漏', '井盖破损'],
          // itemGap: 5
          itemStyle: {
            color: 'inherit',
          },
          textStyle: {
            color: "auto"
          },
          itemWidth: 15,
          itemHeight: 15,
        },
        tooltip: {
          trigger: "axis",
          // formatter: "{b}：{c}件",
          // formatter: "{b}：{c}",
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
          },
          axisPointer: {
            type: "cross",
            textStyle: {
              color: "#fff"
            }
          },
        },
        grid: {
          top: 50,
          bottom: 50,
        },
        xAxis: [
          {
            type: "category",
            axisLine: {
              lineStyle: {
                width: 2,
                color: "#2A384D",
              }
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              color: "#7794C3",
              fontSize: 14,
              fontFamily: "AlibabaPuHuiTi",
            },
            data: this.xAxis,
          }
        ],
        yAxis: [
          {
            type: "value",
            // name: "件",
            nameTextStyle: {
              align: "right",
              color: "#7794C3",
              fontSize: 14,
              fontFamily: "AlibabaPuHuiTi",
              padding: [0, 8, 0, 0],
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
                color: "#2A384D",
              }
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false
            },
            min: 0,
            splitNumber: 4,
            minInterval: 1,
            axisLabel: {
              color: "#7794C3",
              fontSize: 12,
              fontFamily: "AlibabaPuHuiTi",
              formatter: function (value) {
                let texts = [];
                if (value === 0) {
                  texts.push("00");
                } else {
                  texts.push(value);
                }
                return texts;
              }
            },
          }
        ],
        dataZoom: [
          {
            show: true,
            // show: false,
            height: 4,
            bottom: 18,
            start: 10,
            end: 80,
            handleSize: '100%',
            fillerColor: "#94FA41",
            borderColor: "transparent",
            backgroundColor: "rgba(148, 250, 65, 0.2)",
            handleStyle: {
              color: "#94FA41",
            },
            moveHandleSize: 0,
            textStyle: {
              color: "#fff"
            },
          },
          {
            type: "inside",
            show: true,
            height: 15,
            start: 1,
            end: 35
          }
        ],
        series: [
          {
            name: this.yAxis[0] && this.yAxis[0].name,
            type: "bar",
            barWidth: 12,
            itemStyle: {
              borderRadius: [6, 6, 0, 0],
              color: function () {
                return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: "#591929",
                  },
                  {
                    offset: 1,
                    color: "#d03354",
                  }
                ], false);
              }
            },
            // showBackground: true,
            backgroundStyle: {
              color: "transparent",
              borderWidth: 1,
              borderColor: "rgba(148, 250, 65, 0.2)",
            },
            data: this.yAxis[0] && this.yAxis[0].values,
          },
          {
            name: this.yAxis[1] && this.yAxis[1].name,
            type: "bar",
            barWidth: 12,
            itemStyle: {
              borderRadius: [6, 6, 0, 0],
              color: function () {
                return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: "#320368",
                  },
                  {
                    offset: 1,
                    color: "#7000e7",
                  }
                ], false);
              }
            },
            // showBackground: true,
            backgroundStyle: {
              color: "transparent",
              borderWidth: 1,
              borderColor: "rgba(148, 250, 65, 0.2)",
            },
            data: this.yAxis[1] && this.yAxis[1].values,
          },
          {
            name: this.yAxis[2] && this.yAxis[2].name,
            type: "bar",
            barWidth: 12,
            itemStyle: {
              borderRadius: [6, 6, 0, 0],
              color: function () {
                return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: "#023565",
                  },
                  {
                    offset: 1,
                    color: "#0071d9",
                  }
                ], false);
              }
            },
            // showBackground: true,
            backgroundStyle: {
              color: "transparent",
              borderWidth: 1,
              borderColor: "rgba(148, 250, 65, 0.2)",
            },
            data: this.yAxis[2] && this.yAxis[2].values,
          },
        ]
      };
      this.chart.setOption(option);
    },
    resizeChart () {
      if (this.chart) {
        this.chart.resize();
      }
    }
  },
  destroyed () {
    if (this.chart) {
      this.chart.dispose();
    }
  }
};
</script>

4.柱状图和折线图

在这里插入图片描述

      chartInfo2: {
        refresh: 1,
        DataName: "",
        XAxis: [
          "1:00",
          "3:00",
          "5:00",
          "7:00",
          "9:00",
          "11:00",
          "13:00",
          "15:00",
          "17:00",
        ],
        typeName: '降雨量',
        typeName2: 'COD',
        YAxis: [0, 1, 6, 3, 4],
        YAxis2: [4, 2, 33, 4, 1, 5],
        YAxis3: [5, 22, 3, 8, 5, 4],
        loading: false,
      },

       <LineChart2 :refresh="chartInfo2.refresh"
                          :DataName="chartInfo2.DataName"
                          :XAxis="chartInfo2.XAxis"
                          :YAxis="chartInfo2.YAxis"
                          :typeName="chartInfo2.typeName"
                          :typeName2="chartInfo2.typeName2"
                          :YAxis2="chartInfo2.YAxis2"
                          :YAxis3="chartInfo2.YAxis3" />

<template>
  <!-- <div style="width: 100%; height: 100%" ref="lineChart" class="heightclass"></div> -->
  <div style="width:100%; height:100%">
    <div class="chartname">{{DataName}}</div>
    <div ref="lineChart"
         class="heightclass"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  props: {
    //x轴数据
    XAxis: {
      type: Array,
      default: () => []
    },
    //y轴数据
    YAxis: {
      type: Array,
      default: () => []
    },
    YAxis2: {
      type: Array,
      default: () => []
    },
    YAxis3: {
      type: Array,
      default: () => []
    },
    //名字
    DataName: {
      type: String,
    },
    //类型
    typeName: {
      type: String,
      default: '1'
    },
    typeName2: {
      type: String,
      default: '2'
    },
    //刷新
    refresh: {
      type: Number
    }
  },
  data () {
    return {
      chart: null
    }
  },
  mounted () {
    this.initChart();
    window.addEventListener("resize", this.resizeChart);
  },
  watch: {
    refresh () {
      if (this.chart) {
        this.chart.dispose();
        this.chart = null;
      }
      this.initChart();
    }
  },
  methods: {
    //初始化图表
    initChart () {
      this.chart = echarts.init(this.$refs.lineChart);

      let that = this

      let option = {
        // color: ["#0ba47b", "#0060FF"],
        color: ["#0060FF", "#0ba47b"],
        legend: {
          show: true,
          // orient: 'vertical',
          // y: 'top',    //延Y轴居中
          x: 'center', //居右显示  
          align: 'left', //图例控制在左边
          icon: 'circle',

          // padding: [
          //   0, // 上
          //   200, // 右
          //   0, // 下
          //   20, // 左
          // ],
          itemWidth: 15,
          itemHeight: 15,

          itemStyle: {
            // opacity: 0
            // icon: ''
          },

          itemHeight: 15,
          textStyle: {
            color: 'auto',
            rich: {
              another: {
                fontSize: 28,
              },
            },
            fontSize: 14,
          },
        },

        tooltip: {
          trigger: "axis",
          // formatter: "{b}：{c}件",
          // formatter: "{b}：{c}",
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
          },
          axisPointer: {
            type: "cross",
            textStyle: {
              color: "#fff"
            }
          },
        },
        grid: {
          top: '18%',
          left: '3%',
          right: '3%',
          bottom: '15%',
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: this.XAxis,
            axisPointer: {
              type: "shadow",
            },
            axisLabel: {
              show: true,
              color: "#fff",

            },
            axisLine: {
              lineStyle: {
                // color: "#3398DB"  
              },
            },
          },
        ],
        yAxis: [
          {
            inverse: true,  //控制x轴在上方
            name: this.typeName,
            type: "value",
            axisLabel: {
              show: true,
              color: "#0060FF",

            },
            axisLine: {
              lineStyle: {
                color: "#0060FF",
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: 'rgba(61,91,98,0.8)',
              }
            }
          },
          {
            name: this.typeName2,
            type: "value",
            axisLabel: {
              show: true,
              color: "#0ba47b",

            },
            axisLine: {
              lineStyle: {
                color: "#0ba47b",
              },
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: 'rgba(61,91,98,0.8)',
              }
            }
          },
        ],
        dataZoom: [
          {
            show: true,
            // show: false,
            height: 4,
            bottom: 18,
            start: 10,
            end: 80,
            handleSize: '100%',
            fillerColor: "#94FA41",
            borderColor: "transparent",
            backgroundColor: "rgba(148, 250, 65, 0.2)",
            handleStyle: {
              color: "#94FA41",
            },
            moveHandleSize: 0,
            textStyle: {
              color: "#fff"
            },
          },
          {
            type: "inside",
            show: true,
            height: 15,
            start: 1,
            end: 35
          }
        ],
        series: [
          {
            // smooth: true,//变为曲线 默认false折线
            name: this.typeName,
            type: "bar",
            barWidth: 12,
            itemStyle: {
              borderRadius: [0, 0, 6, 6],
              color: function () {
                return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0.1,
                    color: '#0060ff' // 0% 处的颜色
                  },

                  {
                    offset: 0.9,
                    color: '#013068' // 100% 处的颜色
                  }
                ], false);
              }
            },
            // showBackground: true,
            backgroundStyle: {
              color: "transparent",
              borderWidth: 1,
              borderColor: "rgba(148, 250, 65, 0.2)",
            },
            data: this.YAxis,
          },
          // {
          //   smooth: true,//变为曲线 默认false折线
          //   name: '径流量',
          //   type: "line",
          //   yAxisIndex: 1,
          //   data: this.YAxis2,
          // },
          {
            smooth: true,//变为曲线 默认false折线
            name: this.typeName2,
            type: "line",
            yAxisIndex: 1,
            data: this.YAxis3,

            areaStyle: {
              normal: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#0ba57c",
                    },
                    {
                      offset: 1,
                      color: "#044d50",

                    }
                  ],
                  globalCoord: false // 缺省为 false
                }
              }



            },

          },
        ]
      };
      this.chart.setOption(option);
    },
    resizeChart () {
      if (this.chart) {
        this.chart.resize();
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.heightclass {
  min-height: 180px;
  // min-width: 540px;

  // height: calc(100% - 40px);
  height: 100%;
  width: 100%;
}
</style>

5.新的3D柱状图

在这里插入图片描述
关键点就是几个series的堆叠

chartData2: {
xAxis: [‘绿色屋顶’, ‘雨水花园’, ‘透水铺装’, ‘植草沟’, ‘下沉式绿地’],
yAxis: [1, 5, 3, 4, 5, 6],
refresh: 1
},

<template>
  <div :id="id"
       style="width: 100%; height: 100%"></div>
</template>
<script>
import * as echarts from 'echarts';
import { guid } from '@/utils/ruoyi';
import { reactive, toRefs, onMounted, watch } from 'vue';
export default {
  name: 'line-chart',
  props: {
    data: Object,
    refresh: Number,
  },
  setup (props) {
    const allData = reactive({
      series: [],
      legend: [],
      id: guid(),
      chart: null,
    });
    const resizeTheChart = () => {
      if (allData.chart) {
        allData.chart.resize();
      }
    };

    const init = () => {
      let chartDom = echarts.init(document.getElementById(allData.id));

      var shadowYData = [100, 100];
      var color = "rgba(31,227,249,1)";
      var shadowColor = "#0b5767";
      var barWidth = 20;

      var option;
      option = {
        // color: ["#ab2b46", "#7c00ff", "#4cabce",],
        // legend: {
        //   // itemGap: 5
        //   itemStyle: {
        //     color: 'inherit',
        //   },
        //   textStyle: {
        //     color: "auto"
        //   },
        //   itemWidth: 15,
        //   itemHeight: 15,
        // },
        title: {
          // text: '特性示例：渐变色 阴影 点击缩放',
          subtext: '(设施数:个)',
          left: 20,
          subtextStyle: {
            fontSize: 12,
            color: 'rgba(255,255,255,0.7)'
          }

        },
        tooltip: {
          trigger: "axis",
          // formatter: "{b}：{c}件",
          formatter: "{b}：{c}",
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
          },
          axisPointer: {
            type: "cross",
            textStyle: {
              color: "#fff"
            }
          },
        },
        grid: {
          top: 50,
          bottom: 30,
        },
        xAxis: [
          {
            type: "category",
            axisLine: {
              show: false,
              lineStyle: {
                width: 2,
                color: "#58b2ed",
              }
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              color: "rgba(255,255,255,0.9)",
              fontSize: 14,
              fontFamily: "AlibabaPuHuiTi",
            },
            data: props.data.xAxis,
          }
        ],
        yAxis: [
          {
            type: "value",
            // name: "件",
            nameTextStyle: {
              align: "right",
              color: "#7794C3",
              fontSize: 14,
              fontFamily: "AlibabaPuHuiTi",
              padding: [0, 8, 0, 0],
            },
            splitLine: {
              // show: false,
              lineStyle: {
                type: "dashed",
                color: "#58b2ed",
              }
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false
            },
            min: 0,
            splitNumber: 4,
            minInterval: 1,
            axisLabel: {
              color: "rgba(255,255,255,0.7)",
              fontSize: 12,
              fontFamily: "AlibabaPuHuiTi",
              formatter: function (value) {
                let texts = [];
                if (value === 0) {
                  texts.push("0");
                } else {
                  texts.push(value);
                }
                return texts;
              }
            },
          }
        ],
        dataZoom: [
          {
            // show: true,
            show: false,
            height: 4,
            bottom: 18,
            start: 0,
            end: 100,
            handleSize: '100%',
            fillerColor: "#94FA41",
            borderColor: "transparent",
            backgroundColor: "rgba(148, 250, 65, 0.2)",
            handleStyle: {
              color: "#94FA41",
            },
            moveHandleSize: 0,
            textStyle: {
              color: "#fff"
            },
          },
          {
            type: "inside",
            show: true,
            height: 15,
            start: 1,
            end: 35
          }
        ],
        "series": [
          {
            "name": "数据上椭圆",
            type: 'pictorialBar',
            symbolSize: [barWidth, 10],
            symbolOffset: [0, -6],
            symbolPosition: 'end',
            z: 12,
            // "label": {
            //   "normal": {
            //     "show": true,
            //     "position": "top",
            //     fontSize: 14,
            //     color: color,
            //     formatter: function (params, index) {
            //       return params.value + "%";
            //     }
            //   }
            // },
            color: "rgba(17, 160, 176)",
            data: props.data.yAxis
          },
          // {
          //   name: '',
          //   type: 'pictorialBar',
          //   symbolSize: [barWidth, 10],
          //   symbolOffset: [0, 0],
          //   z: 12,
          //   "color": color,
          //   "data": props.data.yAxis
          // },
          {
            name: '',
            type: 'pictorialBar',
            symbolSize: [barWidth + 10, 15],
            symbolOffset: [0, 8],
            z: 10,
            itemStyle: {
              normal: {
                color: 'transparent',
                borderColor: color,
                borderType: 'solid',
                borderWidth: 10
              }
            },
            data: props.data.yAxis
          },
          {
            name: '',
            type: 'pictorialBar',
            symbolSize: [barWidth + 20, 20],
            symbolOffset: [0, 12],
            z: 12,
            itemStyle: {
              normal: {
                color: 'transparent',
                borderColor: color,
                borderType: 'solid',
                borderWidth: 10
              }
            },
            data: props.data.yAxis,
            stack: "check",
          },
          {
            type: 'bar',
            "barWidth": barWidth,
            barGap: '10%', // Make series be overlap
            barCateGoryGap: '10%',
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [{
                  offset: 0,
                  color: "rgba(25,223,221,0.1)"
                },
                {
                  offset: 1,
                  color: "rgba(25,223,221,1)"
                }
                ]),
              },
            },
            data: props.data.yAxis
          },

        ]

      };
      option && chartDom.setOption(option, true);
      allData.chart = chartDom;
    };
    watch(
      () => props.refresh,
      () => {
        if (allData.chartDom) {
          allData.chartDom.dispose();
          allData.chartDom = null;
        }
        setTimeout(() => {
          init();
        }, 0);
      }
    );
    onMounted(() => {
      init();
      window.addEventListener('resize', resizeTheChart);


    });
    return {
      ...toRefs(allData),
      resizeTheChart,
      init,
    };
  },
};
</script>

6.增加了背景阴影的柱状3D

在这里插入图片描述

<template>
  <div :id="id" style="width: 100%; height: 100%"></div>
</template>
<script>
import * as echarts from 'echarts';
import { guid } from '@/utils/ruoyi';
import { reactive, toRefs, onMounted, watch } from 'vue';
export default {
  name: 'line-chart',
  props: {
    data: Object,
    refresh: Number,
  },
  setup(props) {
    const allData = reactive({
      series: [],
      legend: [],
      id: guid(),
      chart: null,
    });
    const resizeTheChart = () => {
      if (allData.chart) {
        allData.chart.resize();
      }
    };

    const init = () => {
      let chartDom = echarts.init(document.getElementById(allData.id));

      var shadowYData = [100, 100];
      var color = 'rgba(31,227,249,1)';
      var barWidth = 20;

      var MaXmm = Math.max.apply(null, props.data.yAxis) * 1.2;
      var MaxArr = [];
      var sum = 0;
      if (props.data.yAxis.length) {
        for (var i = 0; i < props.data.yAxis.length; i++) {
          sum += props.data.yAxis[i];
          if (sum == 0) {
            MaxArr.push(10);
          } else {
            MaxArr.push(MaXmm);
          }
        }
      } else {
        MaxArr = [10, 10, 10, 10];
      }

      var option;
      option = {
        color: ['#5ecfff'],
        tooltip: {
          trigger: 'axis',
          // formatter: '{b}<br />{a0}: {c0}mm',
          formatter: params => {
            // console.log(params);
            var relVal = '' + params[0].name;
            for (var i = 0, l = params.length; i < l; i++) {
              if (params[i].seriesName) {
                let unit = params[i].seriesName == '降雨量' ? 'mm' : '个';
                relVal += '<br/>' + params[i].marker + params[i].seriesName + ' ' + params[i].value + unit;
              }
            }
            return relVal;
          },
        },
        grid: {
          top: 50,
          bottom: 50,
        },
        xAxis: [
          {
            type: 'category',
            axisLine: {
              show: false,
              lineStyle: {
                width: 2,
                color: '#58b2ed',
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              color: 'rgba(255,255,255,1)',
              fontSize: 12,
              fontFamily: 'AlibabaPuHuiTi',
              formatter: function (params) {
                var str = ''; // 最终拼接成的字符串
                var paramsLen = params.length; // 获取每项文字的个数
                var len = 3; // 每行能显示的字的个数（根据实际情况自己设置）
                var rowNumber = Math.ceil(paramsLen / len); // 换行的话，需要显示几行，向上取整
                if (paramsLen > len) {
                  //大于设定的len就换行，不大于就不变化
                  for (var i = 0; i < rowNumber; i++) {
                    var temp = ''; // 表示每一次截取的字符串
                    var start = i * len; // 开始截取的位置
                    var end = start + len; // 结束截取的位置
                    if (i == rowNumber - 1) {
                      // 最后一次不换行
                      temp = params.substring(start, paramsLen);
                    } else {
                      // 每一次拼接字符串并换行
                      temp = params.substring(start, end) + '\n';
                    }
                    str += temp; // 最终拼成的字符串
                  }
                } else {
                  // 给新的字符串赋值
                  str = params;
                }
                return str; //返回字符串
              },
            },
            data: props.data.xAxis,
          },
        ],
        yAxis: [
          {
            name: 'mm',
            type: 'value',
            axisLabel: {
              color: '#56bdf0',
              show: true,
            },
            nameTextStyle: {
              color: '#56bdf0',
            },
            splitLine: {
              lineStyle: {
                type: 'dashed',
                color: '#56bdf0',
              },
            },
            alignTicks: true,
          },
          // {
          //   name: '个数',
          //   type: 'value',
          //   // max: max <  ? 1 : max, // 指定最大值
          //   nameTextStyle: {
          //     color: '#FFF21C',
          //   },
          //   axisLabel: {
          //     show: true,
          //     color: '#FFF21C',
          //   },
          //   splitLine: {
          //     lineStyle: {
          //       color: '#D1DEEE',
          //       type: 'dashed',
          //       color: '#53D8FB',
          //     },
          //   },
          //   alignTicks: true,
          // },
        ],
        dataZoom: [
          {
            // show: true,
            show: false,
            height: 4,
            bottom: 18,
            start: 0,
            end: 100,
            handleSize: '100%',
            fillerColor: '#94FA41',
            borderColor: 'transparent',
            backgroundColor: 'rgba(148, 250, 65, 0.2)',
            handleStyle: {
              color: '#94FA41',
            },
            moveHandleSize: 0,
            textStyle: {
              color: '#fff',
            },
          },
          {
            type: 'inside',
            show: true,
            height: 15,
            start: 1,
            end: 35,
          },
        ],
        series: [
          // 柱状图顶部的圆片
          {
            name: '降雨量', // 系列名称, 用于tooltip的显示, legend 的图例筛选
            type: 'pictorialBar', // 系列类型
            symbolSize: [20, 10], // 标记的大小
            symbolOffset: [0, -5], // 标记相对于原本位置的偏移
            symbolPosition: 'end', // 图形的定位位置。可取值：start、end、center
            // 图例的图形样式
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#92e5c9', // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#6effc4', // 100% 处的颜色
                  },
                ],
              },
            },
            z: 10, // 组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖
            data: props.data.yAxis, // 系列中的数据内容数组
          },
          // 柱状图
          {
            name: '', // 系列名称, 用于tooltip的显示, legend 的图例筛选
            type: 'bar', // 系列类型
            barWidth: 20, // 指定柱宽度，可以使用绝对数值或百分比，默认自适应
            barGap: '-100%', // 不同系列的柱间距离l，如果想要两个系列的柱子重叠，可以设置 barGap 为 '-100%'。这在用柱子做背景的时候有用
            // 图例的图形样式
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(25,223,221,0.9)', // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'rgba(25,223,221,1)', // 100% 处的颜色
                  },
                ],
              },
            },
            label: {
              show: true,
              position: 'top',
              color: '#fff',
              formatter: function (data) {
                return data.value + 'mm';
              },
            },
            data: props.data.yAxis, // 系列中的数据内容数组
          },
          // 柱状图底下的圆片
          // {
          //   name: '',
          //   type: 'pictorialBar', // 系列类型
          //   symbolSize: [20, 12], // 标记的大小
          //   symbolOffset: [0, 5], // 标记相对于原本位置的偏移
          //   // 图例的图形样式
          //   itemStyle: {
          //     color: {
          //       type: 'linear',
          //       x: 0,
          //       y: 0,
          //       x2: 0,
          //       y2: 1,
          //       colorStops: [
          //         {
          //           offset: 0,
          //           color: '#08d3bf', // 0% 处的颜色
          //         },
          //         {
          //           offset: 1,
          //           color: '#11ddd4', // 100% 处的颜色
          //         },
          //       ],
          //     },
          //   },
          //   z: 10, // 组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖
          //   data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1], // 系列中的数据内容数组
          // },
          // 背景顶部的圆片
          {
            name: '', // 系列名称, 用于tooltip的显示, legend 的图例筛选
            type: 'pictorialBar', // 系列类型
            symbolSize: [20, 10], // 标记的大小
            symbolOffset: [0, -5], // 标记相对于原本位置的偏移
            symbolPosition: 'end', // 图形的定位位置。可取值：start、end、center
            // 图例的图形样式
            itemStyle: {
              color: '#457373',
              opacity: 1,
            },
            z: 10, // 组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖
            data: MaxArr, // 系列中的数据内容数组
          },
          // 背景
          {
            name: '', // 系列名称, 用于tooltip的显示, legend 的图例筛选
            type: 'bar', // 系列类型
            barWidth: 20, // 指定柱宽度，可以使用绝对数值或百分比，默认自适应
            barGap: '-100%', // 不同系列的柱间距离l，如果想要两个系列的柱子重叠，可以设置 barGap 为 '-100%'。这在用柱子做背景的时候有用
            // 图例的图形样式
            itemStyle: {
              color: '#0a1429',
              opacity: 0.5,
            },
            z: 0, // 组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖
            data: MaxArr, // 系列中的数据内容数组
          },
        ],
      };
      option && chartDom.setOption(option, true);
      allData.chart = chartDom;
    };
    watch(
      () => props.refresh,
      () => {
        if (allData.chartDom) {
          allData.chartDom.dispose();
          allData.chartDom = null;
        }
        setTimeout(() => {
          init();
        }, 0);
      }
    );
    onMounted(() => {
      init();
      window.addEventListener('resize', resizeTheChart);
    });
    return {
      ...toRefs(allData),
      resizeTheChart,
      init,
    };
  },
};
</script>


  <streetEcharts :data="chartData2" :refresh="chartData2.refresh" />

const chartData2 = ref({
  xAxis: [],
  yAxis: [],
  refresh: 1,
});
echarts折线图实例
qq_38822390的博客
05-29 2万+
五分钟上手： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>五分钟上手之折线图</title> <!-- 引入 echarts.js --> <...
ECharts 折线图 / 柱状图 ，通用配置标注示例
游九尘的博客
10-30 905
【代码】ECharts折线图和柱状图，配置标注示例。
ECharts中折线图实例（源代码可直接运行）
09-29
前段时间在网上看到ECharts这项技术，感觉他的功能非常强大，就去学习研究了下，这个是我练习折线图的实例，希望对各位有所帮助
ECharts 入门使用
最新发布
m0_74383294的博客
03-13 393
ECharts 是一个由百度开源的数据可视化工具，能够流畅地运行在 PC 和移动设备上，兼容当前绝大部分浏览器，提供直观、交互丰富、可高度个性化定制的数据可视化图表。
Echarts折线图案例
hs1219462412的博客
03-28 1642
问题：重置echarts折线图时，总会出现多个数据的拐点，与实际渲染的数据拐点不符合。 解决： 在实例化echarts后 clear 上一次的图。 myEcharts.clear() 案例 const option = { // 触摸 echarts图 的提示内容 tooltip: { // 是否显示提示框 show: true, // 触发类型： // 'item':主要在散点图，饼图等无类目轴的图表中使用
echarts 图表折线图 实例
zhang_zan
07-31 716
echarts绘制折线图
ECHARTS-折线详解
qq_44718666的博客
05-28 1145
option = { backgroundColor: '#fff', // 背景颜色 title: { //标题 text: '堆叠区域图', //主 subtext: '数据来自网络', // 副 textStyle: { //标题样式 color: '#00F6FF', fontSize: 24 }, subtextStyle:{ //副.
echarts折线图实例一
热门推荐
蜗牛的博客
09-26 1万+
1.先看看我们要的一个效果：在点击显示30天和显示2天，数据可以切换，并且另外还要加一个时间区域查询出来；接下来我贴一下具体的操作： 2.以上边的为例，根据回来的数据结构进行解析： //拿2天的数据 var data2yespv=[]; var data2todpv=[]; var data2yesuv=[]; var data2toduv=[]; $.ajax({ type: "
echart渐变折线图
09-04
ECharts中通过series来定义多个数据系列，每个数据系列可以是不同的折线图，也可以包括柱状图、饼图等多种图表类型。系列名称（name）以及数据（data）是每个系列必须配置的基本属性，它们定义了图表的x轴和y轴数据...
echartDemo柱状图折线图详解
10-12
以下是一个简单的ECharts柱状图和折线图的配置示例： ```javascript var myChart = echarts.init(document.getElementById('main')); var option = { title: { text: '柱状图与折线图组合' }, tooltip: {}, ...
Echart折线图手柄触发事件示例详解
10-17
ECharts 3 是目前最新的稳定版本，它不仅提供了丰富的图表类型，如折线图、柱状图、饼图、散点图等，还提供了数据区域缩放、直角坐标系内自由布局、多轴、丰富的视觉映射手段等功能。ECharts 3 为图表的交互性提供了...
Springboot+mybatis+echarts实现数据可视化 折线图饼图柱状图
06-22
在这个项目中，我们将探讨如何使用Springboot、Mybatis和Echarts这三种技术来实现数据的可视化，包括折线图、饼图和柱状图。这些图表类型广泛用于数据分析、报表展示和决策支持。 首先，Springboot是基于Spring框架...
百度echarts使用教程之折线图demo案例源码
07-13
百度echarts使用教程之折线图demo案例源码，此文件可以直接运行看效果
Echarts+ajax+java+mysql实现饼图+折线图+柱状图
07-13
Echarts是一款由百度开发的开源JavaScript图表库，它提供了丰富的可视化图表类型，包括但不限于饼图、折线图和柱状图。在这个项目中，Echarts与AJAX和Java后端结合，利用MySQL数据库来实现动态的数据展示。接下来，...
echarts 折线图实例
smileonlytoyou的博客
09-02 764
定义div <div id="moreColumn" style="width: 80%; height: 70%;float: left;"></div> 定义一个mycharts var myChart = echarts.init(document.getElementById('moreColumn')); 定义方法 function loadCol...
ECharts折线图(详细案例)
GRAY_KEY的博客
04-25 8955
该折线图有几个特性：有数据平均线、有占位背景、X(Y)轴轴线以及轴线刻度不显示。图表效果如下:代码如下:&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;折线图案例&lt;/title&gt; &lt;!-- 引入 ECharts 文件 --&
Echarts可视化教程（三）——折线图的绘制
fh8uuc的博客
10-21 1万+
阶梯图是一种比较特殊的折线图，阶梯图使用间歇型跳跃的方式显示一种无规律的数据的变化。我们将调用浏览器接口，打开你修改的这段代码生成的网页，并截图获取其中的图像，和正确的图像进行对比，从而判断你补充的程序是否正确，正确将输出：“图像对比一致，恭喜通关！之间补充代码，这段代码由上面的堆积折线图示例代码修改而来，你需要补充完这段代码，实现将所有的四条折线都改成阶梯图：其中地铁。同时我们将展示你生成的图像和正确的图像，你可以通过观察图像的方式修改自己尚未通过的代码。中折线图的绘制，包括标准折线图、堆积折线图等。
Echarts折线图实例
yiliacheng
05-28 4812
效果图： 源代码如下： &lt;!DOCTYPE html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;第三部分&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="main" style
echarts 折线图案例
weixin_44486632的博客
01-16 2294
var myChart = echarts.init(selft.$refs.chartsBox); var option = { //dataZoom-inside 内置型数据区域缩放组件 所谓内置 1平移：在坐标系中滑动拖拽进行数据区域平移。2缩放：PC端：鼠标在坐标系范围内滚轮滚动（MAC触控板类同;移动端：在移动端触屏上，支持两......
react echart 柱状折线图
05-31
要在 React 中使用 ECharts 来绘制柱状折线图，可以按照以下步骤进行： 1. 安装 ECharts 库 使用 npm 命令安装 ECharts 库，命令如下： ``` npm install echarts --save ``` 2. 导入 ECharts 库 在需要使用 ECharts 的组件中，通过 import 语句导入 ECharts 库，代码如下： ```javascript import echarts from 'echarts'; ``` 3. 创建 ECharts 实例 在组件的 componentDidMount 生命周期中，通过 ref 获取容器元素，然后创建 ECharts 实例，代码如下： ```javascript componentDidMount() { const { data } = this.props; const chartDom = this.refs.chart; const myChart = echarts.init(chartDom); // 绘制图表 myChart.setOption({ // 配置项 }); } ``` 4. 配置图表 在 setOption 方法中，可以配置图表的各种属性，包括标题、坐标轴、数据系列等，代码如下： ```javascript myChart.setOption({ title: { text: '柱状折线图示例' }, legend: { data: ['销量', '利润'] }, tooltip: {}, xAxis: { data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] }, yAxis: [ { type: 'value', name: '销量（件）' }, { type: 'value', name: '利润（元）' } ], series: [ { name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }, { name: '利润', type: 'line', yAxisIndex: 1, data: [10, 30, 50, 20, 20, 30] } ] }); ``` 以上代码配置了一个带有标题、图例、提示框、两个坐标轴、柱状系列和折线系列的柱状折线图。 5. 渲染图表 最后，在 render 方法中，渲染一个 div 容器，并通过 ref 属性指定其引用，代码如下： ```javascript render() { return ( <div ref="chart" style={{ width: '100%', height: '400px' }}></div> ); } ``` 这样，就可以在 React 中使用 ECharts 绘制柱状折线图了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值