echars柱状图代码讲解演示

最新推荐文章于 2024-07-14 15:54:59 发布
最新推荐文章于 2024-07-14 15:54:59 发布
阅读量596 收藏 6
点赞数
文章标签： javascript echarts ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_52946104/article/details/130543068
版权

在这里插入图片描述

<template>
  <div
    class="echart"
    ref="mychart1"
    style="height:400px"
  ></div>
</template>

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

export default {
  name: 'EchartsBar1',
  data () {
    return {}
  },
  mounted () {
    this.initBar()
  },
  methods: {
    initBar () {
      const option = {
        title: { // 标题组件
          text: '效果一',
          top: 10,
          // 距离容器左侧的距离。可选left,right等
          left: 'center',
          textStyle: {
            color: '#fff',
            fontSize: 20
          }
        },
        grid: { // 直角坐标系内绘图网格
          // grid区域是否包含坐标轴的刻度标签。
          // false可使多个grid区域坐标轴对齐
          containLabel: false,
          bottom: '10%',// grid 组件离容器下侧的距离。默认60px
          top: '20%' // grid 组件离容器上侧的距离。默认60px
        },
        xAxis: { // X轴-相关设置
          axisLabel: { // X轴-坐标轴刻度标签的相关设置。
            show: true, // 是否显示刻度标签。默认为true
            color: '#fff',
            rotate: 0,// 刻度标签旋转的角度。默认为0
            margin: 20, // 刻度标签与轴线之间的距离。 默认8px
            fontSize: 15,
            // 坐标轴刻度标签的显示间隔。
            // 0表示显示所有标签,1表示间隔一个显示标签
            interval: 0
          },
          axisTick: { // X轴-坐标轴刻度相关设置 
            show: false
          },
          splitLine: { // X轴-分隔线
            show: false
          },
          axisLine: { // X轴-坐标轴轴线相关设置
            show: true,
            lineStyle: {
              color: '#384267',
              type: 'dashed' // 线的类型。可选'solid'等
            }
          },
          data: ['周一', '周二', '周三', '周四', '周五'],
        },
        yAxis: { // Y轴-相关设置
          name: 'emo次数', // Y轴-坐标轴名称
          nameTextStyle: { // Y轴-坐标轴名称的文字样式
            color: '#fff',
            padding: [0, 0, 10, 0],
            fontSize: 14
          },
          axisLabel: { // Y轴-坐标轴刻度标签的相关设置
            color: '#fff',
            fontSize: 15
          },
          axisTick: { // Y轴-坐标轴刻度相关设置。
            show: true,
            lineStyle: {
              color: '#384267'
            }
          },
          splitLine: { // Y轴-分隔线
            show: true,
            lineStyle: {
              color: '#384267',
              type: 'dashed'
            }
          },
          axisLine: { // Y轴-坐标轴轴线相关设置。
            show: true,
            lineStyle: {
              color: '#384267',
              type: 'solid'
            }
          }
        },
        series: [// 柱体系列数据
          {
            name: 'emo次数',
            data: [1000, 750, 850, 500, 233],
            type: 'bar',
            barWidth: 30, // 柱条的宽度
            itemStyle: { // 柱条图形样式
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                global: false,
                colorStops: [
                  { offset: 0, color: '#057DFE' },// 0% 处的颜色
                  { offset: 1, color: '#02D7EA' }// 100% 处的颜色
                ]
              }
            },
            label: { // 图形上的文本标签
              show: true,
              position: 'top',// 标签的位置。可选top，left等
              distance: 10, // 距离图形元素的距离。默认值5
              color: '#fff'
            }
          }
        ],
        tooltip: { // 提示框组件
          trigger: 'axis',// 触发类型。坐标轴触发
          backgroundColor: 'rgba(17,95,182,0.5)',
          textStyle: {
            color: "#fff"
          },
          axisPointer: { // 坐标轴指示器配置项
            type: 'shadow' // 可选line，shadow，none，cross
          },
          formatter: (params) => {
            return (
              `${params[0].name}<br />
              ${params[0].seriesName}：${params[0].value}`
            )
          }
        }
      }
      const myChart = echarts.init(this.$refs['mychart1'])
      myChart.setOption(option)
    }
  }
}

</script>
<style scoped>
</style>

在这里插入图片描述

<template>
  <div
    class="echart"
    ref="mychart2"
    style="height:400px"
  ></div>
</template>

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

export default {
  name: 'EchartsBar2',
  data () {
    return {}
  },
  mounted () {
    this.initBar()
  },
  methods: {
    initBar () {
      const option = {
        title: { // 标题组件
          text: '效果二',
          top: 10,
          left: 'center', // 距离容器左侧的距离。可选left,right等
          textStyle: {
            color: '#fff',
            fontSize: 20
          }
        },
        grid: { // 直角坐标系内绘图网格
          containLabel: false,
          bottom: '10%',// grid 组件离容器下侧的距离。默认60px
          top: '20%' // grid 组件离容器上侧的距离。默认60px
        },
        xAxis: { // X轴-相关设置
          axisLabel: { // X轴-坐标轴刻度标签的相关设置。
            show: true, // 是否显示刻度标签。默认为true
            color: '#fff',
            rotate: 0,// 刻度标签旋转的角度。默认为0
            margin: 20, // 刻度标签与轴线之间的距离。 默认8px
            fontSize: 15,
            // 坐标轴刻度标签的显示间隔。0表示显示所有标签,1表示隔一个标签显示一个标签
            interval: 0
          },
          axisTick: { // X轴-坐标轴刻度相关设置
            show: false
          },
          splitLine: { // X轴-分隔线
            show: false
          },
          axisLine: { // X轴-坐标轴轴线相关设置
            show: true,
            lineStyle: {
              color: '#384267',
              type: 'dashed' // 线的类型。可选'solid'等
            }
          },
          data: ['周一', '周二', '周三', '周四', '周五'],
        },
        yAxis: { // Y轴-相关设置
          name: 'emo次数', // Y轴-坐标轴名称
          nameTextStyle: { // Y轴-坐标轴名称的文字样式
            color: '#fff',
            padding: [0, 0, 10, 0],
            fontSize: 14
          },
          axisLabel: { // Y轴-坐标轴刻度标签的相关设置
            color: '#fff',
            fontSize: 15,
          },
          axisTick: { // Y轴-坐标轴刻度相关设置。
            show: true,
            lineStyle: {
              color: '#384267'
            }
          },
          splitLine: { // Y轴-分隔线
            show: true,
            lineStyle: {
              color: '#384267',
              type: 'dashed'
            }
          },
          axisLine: { // Y轴-坐标轴轴线相关设置。
            show: true,
            lineStyle: {
              color: '#384267',
              type: 'solid'
            }
          }
        },
        series: [
          { // 柱底
            data: [1000, 750, 850, 500, 233],
            type: 'pictorialBar', // 象形柱图
            //图形的定位位置。柱子开始的地方。可选start,end,center
            symbolPosition: 'start',
            symbol: 'diamond', //图形类型。可选'circle','rect'等
            // 把图形向下移动了自身尺寸的一半的位置
            symbolOffset: [0, '50%'],
            symbolSize: [30, 15], // 图形的大小
            itemStyle: {
              color: '#02D7EA'
            }
          },
          { // 柱体系列数据
            name: 'emo次数',
            data: [1000, 750, 850, 500, 233],
            type: 'bar',
            barWidth: 30,
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                global: false,
                colorStops: [
                  { offset: 0, color: '#057DFE' },// 0% 处的颜色
                  { offset: 1, color: '#02D7EA' }// 100% 处的颜色
                ]
              }
            },
            label: { // 图形上的文本标签
              show: true,
              position: 'top', // 标签的位置。可选top，left等
              distance: 10, // 距离图形元素的距离。默认值5
              color: '#fff'
            }
          },
          { // 柱顶
            data: [1000, 750, 850, 500, 233],
            type: 'pictorialBar', // 象形柱图
            //图形的定位位置。柱子结束的地方。可选start,end,center
            symbolPosition: 'end',
            symbol: 'diamond', //图形类型。可选'circle','rect'等
            // 把图形向上移动了自身尺寸的一半的位置。
            symbolOffset: [0, '-50%'],
            symbolSize: [30, 15], // 图形的大小
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                global: false,
                colorStops: [
                  { offset: 0, color: '#057DFE' },// 0% 处的颜色
                  { offset: 1, color: '#02D7EA' }// 100% 处的颜色
                ]
              }
            },
            z: 3
          }
        ],
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(17,95,182,0.5)',
          textStyle: {
            color: '#fff'
          },
          axisPointer: {
            type: 'shadow'
          },
          formatter: (params) => {
            return (
              `${params[0].name}<br />
              ${params[0].seriesName}：${params[0].value}`
            )
          }
        },
      }
      const myChart = echarts.init(this.$refs['mychart2'])
      myChart.setOption(option)
    }
  }
}

</script>
<style scoped>
</style>

在这里插入图片描述

<template>
  <div
    class="echart"
    ref="mychart3"
    style="height:400px"
  ></div>
</template>

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

export default {
  name: 'EchartsBar3',
  data () {
    return {}
  },
  mounted () {
    this.initBar()
  },
  methods: {
    initBar () {
      const option = {
        title: { // 标题组件
          text: '效果三',
          top: 10,
          left: 'center', // 距离容器左侧的距离。可选left,right等
          textStyle: {
            color: '#fff',
            fontSize: 20
          },
        },
        grid: { // 直角坐标系内绘图网格
          containLabel: false,
          bottom: '10%',// grid 组件离容器下侧的距离。默认60px
          top: '20%' // grid 组件离容器上侧的距离。默认60px
        },
        legend: { // 图例组件
          top: '12%', // 图例组件离容器上侧的距离
          left: 'center',// 图例组件离容器左侧的距离
          textStyle: {
            color: "#fff",
            fontSize: 14
          },
          itemGap: 50, // 图例每项之间的间隔。默认10
          itemHeight: 10, // 图例标记的图形高度。默认14
          data: ['emo次数', '抓狂次数']
        },
        xAxis: { // X轴-相关设置
          axisLabel: { // X轴-坐标轴刻度标签的相关设置。
            show: true,
            color: '#fff',
            margin: 20, // 刻度标签与轴线之间的距离。 默认8px
            fontSize: 15,
            interval: 0
          },
          axisTick: { // X轴-坐标轴刻度相关设置
            show: false
          },
          splitLine: { // X轴-分隔线
            show: false
          },
          axisLine: { // X轴-坐标轴轴线相关设置
            show: true,
            lineStyle: {
              color: '#384267',
              type: 'dashed' // 线的类型。可选'solid'等
            }
          },
          data: ['周一', '周二', '周三', '周四', '周五']
        },
        yAxis: [ // Y轴-相关设置
          { // 左侧y轴
            name: 'emo次数',
            nameTextStyle: { // 坐标轴名称的文字样式
              color: '#fff',
              padding: [0, 0, 10, 0],
              fontSize: 14
            },
            axisLabel: { // Y轴-坐标轴刻度标签的相关设置
              fontSize: 14,
              color: '#fff'
            },
            axisTick: { // Y轴-坐标轴刻度相关设置。
              show: true,
              lineStyle: {
                color: '#384267'
              }
            },
            splitLine: { // Y轴-分隔线
              show: true,
              lineStyle: {
                color: '#384267',
                type: 'dashed'
              }
            },
            axisLine: { // Y轴-坐标轴轴线相关设置。
              show: true,
              lineStyle: {
                color: '#384267',
                type: 'solid'
              }
            }
          },
          { // 右侧y轴
            position: 'right', // y 轴的位置。可选left,right。默认 第一个 y 轴在左侧（'left'），第二个 y 轴在另一侧。
            axisLabel: { // Y轴-坐标轴刻度标签的相关设置
              show: true,
              textStyle: {
                fontSize: 14,
                color: '#fff'
              }
            },
            axisTick: { // Y轴-坐标轴刻度相关设置。
              show: false
            },
            splitLine: { // Y轴-分隔线
              show: false
            },
            axisLine: { // Y轴-坐标轴轴线相关设置。
              show: true,
              lineStyle: {
                color: '#384267',
                type: 'solid'
              }
            }
          }
        ],
        series: [
          { // 柱状系列数据
            name: 'emo次数',
            type: 'bar',
            yAxisIndex: 0, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
            data: [1000, 750, 850, 500, 233],
            barWidth: 30,
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                global: false,
                colorStops: [
                  { offset: 0, color: '#057DFE' },// 0% 处的颜色
                  { offset: 1, color: '#02D7EA' }// 100% 处的颜色
                ]
              }
            },
            label: { // 图形上的文本标签
              show: true,
              position: 'top', // 标签的位置。可选top，left等
              distance: 10, // 距离图形元素的距离。默认值5
              color: '#fff'
            }
          },
          { // 折线系列数据
            name: '抓狂次数',
            type: 'line',
            data: [1230, 500, 650, 350, 233],
            //使用的 y 轴的 index
            // 在单个图表实例中存在多个 y轴的时候有用
            yAxisIndex: 1,
            smooth: false, // 是否平滑曲线显示
            //标记的图形为实心圆。可选 'circle'，'rect'等
            symbol: 'emptyCircle',
            symbolSize: 10, //标记的大小
            itemStyle: {
              //折线拐点标志的样式
              color: '#FF9B61'
            },
            lineStyle: {
              color: '#FF9B61'
            }
          }
        ],
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(17,95,182,0.5)',
          textStyle: {
            color: '#fff'
          },
          formatter: (params) => {
            let oneDotHtml = '<span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:#057DFE"></span>'
            let twoDotHtml = '<span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:#FF9B61"></span>'
            return (
              `${params[0].name}<br />
            ${oneDotHtml}${params[0].seriesName}：${params[0].value}<br />
            ${twoDotHtml}${params[1].seriesName}：${params[1].value}
            `
            )
          }
        }
      }
      const myChart = echarts.init(this.$refs['mychart3'])
      myChart.setOption(option)
    }
  }
}

</script>
<style scoped>
</style>

在这里插入图片描述

<template>
  <div
    class="echart"
    ref="mychart4"
    style="height:400px"
  ></div>
</template>

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

export default {
  name: 'EchartsBar4',
  data () {
    return {}
  },
  mounted () {
    this.initBar()
  },
  methods: {
    initBar () {
      const option = {
        title: { // 标题组件
          text: '效果四',
          top: 10,
          left: 'center',// 距离容器左侧的距离。可选left,right等
          textStyle: {
            color: '#fff',
            fontSize: 20
          }
        },
        grid: { // 直角坐标系内绘图网格
          containLabel: false,// 坐标轴对齐？
          bottom: '10%',// grid 组件离容器下侧的距离。默认60px
          top: '20%' // grid 组件离容器上侧的距离。默认60px
        },
        legend: { // 图例组件
          top: '12%',// 图例组件离容器上侧的距离
          left: 'center',// 图例组件离容器左侧的距离
          textStyle: {
            color: '#fff',
            fontSize: 14
          },
          itemGap: 50, // 图例每项之间的间隔。默认10
          itemHeight: 10,// 图例标记的图形高度。默认14
          data: ['emo次数', '抓狂次数']
        },
        xAxis: { // X轴-相关设置
          data: ['周一', '周二', '周三', '周四', '周五'],
          axisLabel: { // X轴-坐标轴刻度标签的相关设置。
            show: true,
            color: '#fff',
            margin: 20, // 刻度标签与轴线之间的距离。 默认8px
            fontSize: 15,
            interval: 0
          },
          axisTick: { // X轴-坐标轴刻度相关设置
            show: false
          },
          splitLine: { // X轴-分隔线
            show: false
          },
          axisLine: { // X轴-坐标轴轴线相关设置
            show: true,
            lineStyle: {
              color: '#2D4377',
              type: 'dashed'// 线的类型。可选'solid'等
            }
          },
        },
        yAxis: [ // Y轴-相关设置
          { // 左侧y轴
            min: 0,
            max: 1500,
            name: 'emo次数',
            nameTextStyle: { // 坐标轴名称的文字样式
              color: '#fff',
              padding: [0, 0, 10, 0],
              fontSize: 14
            },
            axisLabel: { // Y轴-坐标轴刻度标签的相关设置
              fontSize: 14,
              color: "#fff"
            },
            axisTick: { // Y轴-坐标轴刻度相关设置。
              show: false
            },
            splitLine: { // Y轴-分隔线
              show: true,
              lineStyle: {
                color: '#384267',
                type: 'dashed'
              }
            },
            axisLine: { // Y轴-坐标轴轴线相关设置。
              show: true,
              lineStyle: {
                color: '#384267',
                type: 'solid'
              }
            }
          },
          { // 右侧y轴
            position: 'right', // y 轴的位置。可选left,right。默认 第一个 y 轴在左侧（'left'），第二个 y 轴在另一侧。
            axisLabel: { // Y轴-坐标轴刻度标签的相关设置
              fontSize: 14,
              color: '#fff'
            },
            axisTick: { // Y轴-坐标轴刻度相关设置。
              show: false
            },
            splitLine: { // Y轴-分隔线
              show: false
            },
            axisLine: { // Y轴-坐标轴轴线相关设置。
              show: true
            }
          }],
        series: [
          { // 柱状系列数据
            name: 'emo次数',
            type: 'bar',
            data: [1000, 750, 850, 500, 233],
            barWidth: 30,
            yAxisIndex: 0, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
            itemStyle: { // lenged文本
              opacity: 0.7,
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                global: false,
                colorStops: [
                  { offset: 0, color: '#12B9DB' },// 0% 处的颜色
                  { offset: 1, color: '#007AFF' }// 100% 处的颜色
                ]
              }
            }
          },
          { // 折线系列数据
            name: '抓狂次数',
            type: 'line',
            data: [1230, 500, 650, 350, 233],
            yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
            smooth: false, // 是否平滑曲线显示
            symbol: 'emptyCircle', //标记的图形为实心圆。可选 circle，rect等
            symbolSize: 10,
            itemStyle: {
              //折线拐点标志的样式
              color: '#FF9B61'
            },
            lineStyle: {
              color: '#FF9B61'
            }
          },
          { // 柱体背景
            name: '背景',
            type: 'bar',
            data: [1500, 1500, 1500, 1500, 1500],
            barWidth: 30,
            // 不同系列的柱间距离。-100%表示两个系列的柱子重叠
            barGap: '-100%',
            z: 0,
            itemStyle: {
              color: '#163F7A',
              opacity: 0.7
            }
          }
        ],
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(17,95,182,0.5)',
          textStyle: {
            color: '#fff'
          },
          formatter: (params) => {
            let oneDotHtml = '<span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:#057DFE"></span>'
            let twoDotHtml = '<span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:#FF9B61"></span>'
            return (
              `${params[0].name}<br />
            ${oneDotHtml}${params[0].seriesName}：${params[0].value}<br />
            ${twoDotHtml}${params[1].seriesName}：${params[1].value}
            `
            )
          }
        }
      }
      const myChart = echarts.init(this.$refs['mychart4'])
      myChart.setOption(option)
    }
  }
}

</script>
<style scoped>
</style>

在这里插入图片描述

<template>
  <div
    class="echart"
    ref="mychart5"
    style="height:400px"
  ></div>
</template>

<script>
import * as echarts from "echarts"

export default {
  name: 'EchartsBar5',
  data () {
    return {
      color: ['#275DFE', '#2773FE', '#019BFF', '#17A7F4', '#7DEBFF']
    }
  },
  mounted () {
    this.initBar()
  },
  methods: {
    initBar () {
      const that = this
      let option = {
        title: { // 标题组件
          text: '效果五',
          top: 10,
          left: 'center',
          textStyle: {
            color: '#fff',
            fontSize: 20
          }
        },
        grid: { // 直角坐标系内绘图网格
          containLabel: false,
          bottom: '10%',// grid 组件离容器下侧的距离。默认60px
          top: '20%' // grid 组件离容器上侧的距离。默认60px
        },
        xAxis: { // X轴-相关设置
          show: false
        },
        yAxis: { // Y轴-相关设置
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五'],
          inverse: true, // 是否是反向坐标轴
          axisLabel: { // Y轴-坐标轴刻度标签的相关设置。
            margin: 20,
            fontSize: 15,
            color: '#fff'
          },
          axisTick: { // Y轴-坐标轴刻度相关设置
            show: false
          },
          splitLine: { // Y轴-分隔线
            show: false
          },
          axisLine: { // Y轴-坐标轴轴线相关设置
            show: false
          }
        },
        series: [
          { // 柱条数据
            name: 'emo次数',
            type: 'bar',
            barWidth: 7,
            data: [1000, 750, 850, 500, 233],
            itemStyle: {
              color: function (param) {
                return that.color[param.dataIndex]
              }
            }
          },
          { // 柱条背景
            name: '背景',
            type: 'bar',
            barWidth: 7,
            data: [1200, 1200, 1200, 1200, 1200],
            // 不同系列的柱间距离。-100%表示两个系列的柱子重叠
            barGap: '-100%',
            itemStyle: {
              color: 'rgba(118, 111, 111, 0.1)'
            },
            z: 0,
            tooltip: {
              show: false
            }
          }
        ],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'none'
          },
          backgroundColor: 'rgba(17,95,182,0.5)',
          textStyle: {
            color: "#fff"
          }
        }
      }
      const myChart = echarts.init(this.$refs['mychart5'])
      myChart.setOption(option)
    }
  }
}
</script>
<style scoped>
</style>

在这里插入图片描述

<template>
  <div
    class="echart"
    ref="mychart6"
    style="height:400px"
  ></div>
</template>

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

export default {
  name: 'EchartsBar6',
  data () {
    return {}
  },
  mounted () {
    this.initBar()
  },
  methods: {
    initBar () {
      const option = {
        title: { // 标题组件
          text: '效果六',
          top: 10,
          left: 'center',// 距离容器左侧的距离。可选left,right等
          textStyle: {
            color: '#fff',
            fontSize: 20
          }
        },
        grid: { // 直角坐标系内绘图网格
          // grid区域是否包含坐标轴的刻度标签。
          // false可使多个grid区域坐标轴对齐
          containLabel: false,
          bottom: '10%',// grid 组件离容器下侧的距离。默认60px
          top: '20%' // grid 组件离容器上侧的距离。默认60px
        },
        xAxis: { // X轴-相关设置
          axisLabel: { // X轴-坐标轴刻度标签的相关设置。
            show: true,
            color: '#fff',
            margin: 20, // 刻度标签与轴线之间的距离。 默认8px
            fontSize: 15,
            interval: 0
          },
          axisTick: { // X轴-坐标轴刻度相关设置
            show: false
          },
          splitLine: { // X轴-分隔线
            show: false
          },
          axisLine: { // X轴-坐标轴轴线相关设置
            show: true,
            lineStyle: {
              color: '#2D4377',
              type: 'dashed'
            }
          },
          data: ['周一', '周二', '周三', '周四', '周五'],
        },
        yAxis: { // Y轴-相关设置
          max: 1200,
          name: 'emo次数',
          nameTextStyle: { // Y轴-坐标轴名称的文字样式
            color: '#fff',
            padding: [0, 0, 10, 0],
            fontSize: 14
          },
          axisLabel: { // Y轴-坐标轴刻度标签的相关设置
            fontSize: 15,
            color: "#fff"
          },
          axisTick: { // Y轴-坐标轴刻度相关设置。
            show: false
          },
          splitLine: { // Y轴-分隔线
            show: true,
            lineStyle: {
              color: '#384267',
              type: 'dashed'
            }
          },
          axisLine: { // Y轴-坐标轴轴线相关设置。
            show: true,
            lineStyle: {
              color: '#384267',
              type: 'solid'
            }
          }
        },
        series: [ // 锥形系列数据
          {
            name: 'emo次数',
            data: [1000, 750, 850, 500, 233],
            type: 'pictorialBar', // 象形柱图 
            barWidth: 80, // 柱条的宽度
            symbol: `path://M0,10 L10,10 C5.5,
            10 6.5,5 5,0 C3.5,5 4.5,10 0,10 z`,
            itemStyle: { // 柱条图形样式
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                global: false,
                colorStops: [
                  { offset: 0, color: '#057DFE' },// 0% 处的颜色
                  { offset: 1, color: '#02D7EA' }// 100% 处的颜色
                ]
              }
            },
            label: { // 图形上的文本标签
              show: true,
              position: 'top',// 标签的位置。可选top，left等
              distance: 10,// 距离图形元素的距离。默认值5
              color: '#fff'
            }
          }
        ],
        tooltip: { // 提示框组件
          trigger: 'axis',// 触发类型。坐标轴触发，主要在柱状图等使用类目轴的图表中使用
          backgroundColor: 'rgba(17,95,182,0.5)',
          textStyle: {
            color: '#fff'
          },
          axisPointer: { // 坐标轴指示器配置项
            type: 'shadow' // 可选line，shadow，none，cross
          },
          formatter: (params) => {
            return (
              `${params[0].name}<br />
              ${params[0].seriesName}：${params[0].value}`
            )
          }
        }
      }
      const myChart = echarts.init(this.$refs['mychart6'])
      myChart.setOption(option)
    }
  }
}

</script>
<style scoped>
</style>
内心的一片海
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
柱状图多维条形图vue_Vue2+Echarts实现多种图表数据可视化Dashboard详解（附源码）...
weixin_30481539的博客
01-11 648
数据可视化将数据通过图表的形式展现出来将大大的提升可读性和阅读效率本例包含柱状图、折线图、散点图、热力图、复杂柱状图、预览面板等技术栈vue2.xvuex 存储公共变量，如色值等vue-router 路由element-ui 饿了么基于vue2开发组件库，本例使用了其中的datePickerecharts 一款丰富的图表库webpack、ES6、Babel、Stylus...演示此项目为PC端数据...
前端图表插件ECharts入门教程
无发可说的博客
12-09 551
在前端项目开发中，有很多地方会遇到绘制图表的需求，一般的图表可以通过canvas来绘制，但是遇到复杂一点的图表怎么办呢?不要慌，在下今天就给大家推荐一个前端大佬们用的非常火的图表插件——ECharts。 ECharts特性简介 ECharts是一个使用 JavaScript 实现的开源可视化库 ，啥叫开源呢，通俗点说，就是免费!不要钱!小伙伴们可以大胆放心的使用，可视化工具呢，就是将一系列的数据，转化成非常直观的图表，来供大家查看，ECharts可谓是制作图表的良心之选，并且可以流畅的运行在 PC 和移
echarts 实现柱状图左右横向对比显示
Songywaa的博客
03-29 1万+
重点看代码中的注释 ： 处理负半轴的数据显示，后台传负数，代码中处理显示时为正数 接下来直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>对比柱状图</title> <script type...
echarts基本代码结构
qq_57916683的博客
05-16 165
【代码】echarts基本代码结构。
vue3 数据可视化实战echarts图表柱状图和饼图的联动_echarts饼图与柱状图联动(1)
2401_84617969的博客
05-08 451
由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】目录💰前言👍🏻实现过程📊 柱状图思路1.初始化数据2.画柱状图3.初始化柱状图点击事件BarClick4.defaultClick事件🆚饼图思路❤️总结。
ECharts的讲解
热门推荐
weixin_62268437的博客
08-11 1万+
把数据以更直观的形式展现----图表可以清晰有效地传达与沟通信息可以帮助我们快速的获取隐藏在数据中的信息ECharts是一个使用JavaScript实现的开源可视化库，兼容性强，底层依赖矢量图形库ZRender，提供直观，交换丰富，可高度个性化定制的数据可视化图表。官网地址：https://echarts.apache.org/zh/index.html。...
Selenium 柱状图自动化测试
C'mon的博客
02-24 1752
柱状图是图表中非常基本的图形之一，可以很直观的对多项数据进行对比展示。那么如何对柱状图进行自动化测试呢？本篇小编将结合实际工作经验来分享一下小编在工作中使用Selenium对柱状图进行自动化测试的经验。本篇还是讲述以echarts为图表库构建的基础柱状图图表的自动化测试,选一个echarts官方示例有交互数据的柱状图：Apache ECharts，一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。c=bar1。
在Ruoyi中采用Ajax动态生成Echarts图表实践
夜郎King的博客
08-05 1万+
文将以Ruoyi框架为例，深入讲解基于Ajax技术，实现数据的动态接入，让读者了解如何进行数据的动态接入代码实战开发
Echarts使用心得总结（二）
打杂人
07-25 4564
前言： 前一段时间一直都挺忙的，各种事，也没来得及每周的总结，趁着晚上的一点时间把项目中用的Echart中常用的各种图表给抽象总结了一下，趁着周末跟大家分享一下。之前写过一篇相关的文章，当时主要是讲了如何引入、使用Echart，最新的Echart版本已经发布，之前讲的很多文件都可以删除了，下边会一一给大家细讲。 为了更好的讲解如何使用这个图形渲染插件，我会通过创建一个解决方案的形式一点
UE4 通过Echarts实现各种统计图
qq_41410054的博客
03-12 5688
主要内容： 本文主要讲解UE4 UMG向网页发送数据，通过WebBrowser插件将用Echarts定制好的统计图在UE4内展现出来，达到数据可视化的效果。 实现步骤： 1.启用UE4自带的WebBrowser插件
echarts 柱状图渐变色背景
05-14
该案例设置 echarts 柱状图渐变色，同样也可以应用折线图、圆形图等。效果说明：https://blog.csdn.net/qq_36437172/article/details/106115048
echarts柱状图滚动轮播显示
02-02
场景：echarts中的柱状图当在数据过多时会挤压柱子，所以想实现数据项过多时，进行数据项的轮播显示。 代码：初始显示n个，超出数据定时滑动实现柱子轮播
echarts柱状图
11-11
在ECharts中，柱状图通过`series`配置项来定义，具体代码结构如下： ```javascript option = { xAxis: { // x轴配置 data: ['类别1', '类别2', '类别3', '类别4'] }, yAxis: {}, // y轴配置 series: [ // 数据...
echarts柱状图统计表特效代码
03-20
在这个“echarts柱状图统计表特效代码”中，我们可以看到如何利用ECharts来创建一个展示多组品牌销售数据的柱状图表，以直观地对比不同品牌之间的销售表现。 首先，我们需要在HTML中引入ECharts的库文件。ECharts的...
Echarts 柱状图自动刷新数据
11-01
ECharts是一款由百度开发的，基于JavaScript的数据可视化库，它提供了丰富的图表类型，包括柱状图、折线图、饼图等，适用于多种浏览器环境，且支持移动端。在本案例中，我们将关注如何实现ECharts柱状图的数据自动...
【JavaScript 报错】未捕获的URI错误：Uncaught URIError
Allen-
07-11 665
Uncaught URIError 是JavaScript中常见的一种错误，通常发生在全局URI处理函数（如 decodeURIComponent、encodeURIComponent）使用不当时。本文将详细介绍 Uncaught URIError 错误的常见原因及其解决方案。
vue2 实现原生 WebSocket
weixin_38797742的博客
07-11 294
原生WebSocket： new WebSocket。
ReactRouter v6升级的步骤
最新发布
feixin369的博客
07-14 187
React Router v6 引入了一个 Routes组件，它有点像Switch，但功能要强大得多。与Switch相比，RoutesReact.lazy。
echarts 柱状图代码示例
04-09
以下是一个简单的echarts柱状图代码示例： ```html <!DOCTYPE html> <title>ECharts 柱状图示例 <!-- 引入 echarts.js --> <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/echarts.min.js">...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值