echart 柱状图-bar

最新推荐文章于 2023-12-27 09:37:31 发布

丰的传说

最新推荐文章于 2023-12-27 09:37:31 发布

阅读量475

点赞数 9

分类专栏： vue实战文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_42389674/article/details/134655010

版权

vue实战专栏收录该内容

11 篇文章 0 订阅

订阅专栏

业务场景一

效果

业务组件调用代码

<template>        
<barCom 
:domId="1" 
:title="barComProps.title" 
:xAxisData="barComProps.xAxisData"
:yAxisProps="barComProps.yAxisProps" 
:seriseData="barComProps.seriseData"
:emphasisItemStyle="barComProps.emphasisItemStyle" 
:itemStyle="barComProps.itemStyle"
:stackFlag="barComProps.stackFlag"
:stackLabel="barComProps.stackLabel" 
:borderRadius="barComProps.borderRadius"
:formatCallBack="barComProps.formatCallBack">
</barCom>
</template>

<script lang="ts" setup>
import barCom from "../../components/echartsCom/barCom.vue"

const barComProps = reactive({
  title: "柱状图",
  xAxisData: ['点', '击', '柱', '子', '或', '者', '两', '指', '在'],
  yAxisProps: {
    type: "value",
    splitLine: {//是否显示 y轴横线
      show: false
    },
    show: false
  },
  seriseData: [220, 182, 191, 234, 290, 330, 310, 120, 362],//数据
  itemStyle: [//柱状图的默认颜色 渐变
    { offset: 0, color: '#f00' },
    { offset: 0.5, color: '#188df0' },
    { offset: 1, color: '#188df0' }
  ],
  emphasisItemStyle: [//柱状图的高亮颜色 渐变
    { offset: 0, color: '#f00' },
    { offset: 0.7, color: '#2378f7' },
    { offset: 1, color: '#83bff6' }
  ],
  stackFlag: true,//柱状图是否显示每个柱条的数量
  stackLabel: {
    show: true,
    position: 'top',
    color: "#f00"
  },
  borderRadius: 0,
  formatCallBack: (params: any) => {
    if (!params || params.length == 0 || !Array.isArray(params)) return
    let fromatStr = ""
    params.forEach((ele: any) => {
      fromatStr += '<div style="border-bottom:1px solid #ccc;"><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + ele.color + '"></span>' + ele.data + "</div>"
    })
    return fromatStr
  }
})



</script>

业务场景二

效果

业务组件调用代码

<template>
<barCom
  :domId="2" 
  :title="barComPropsSimple.title" 
:xAxisData="barComPropsSimple.xAxisData"
 :yAxisProps="barComPropsSimple.yAxisProps" 
:seriseData="barComPropsSimple.seriseData"
 :emphasisItemStyle="barComPropsSimple.emphasisItemStyle" :itemStyle="barComPropsSimple.itemStyle"
:stackFlag="barComPropsSimple.stackFlag" 
:stackLabel="barComPropsSimple.stackLabel"
:borderRadius="barComPropsSimple.borderRadius" :formatCallBack="barComPropsSimple.formatCallBack">
</barCom>
</template>
<script lang="ts" setup>
import barCom from "../../components/echartsCom/barCom.vue"
const barComPropsSimple = reactive({
  title: "柱状图",
  xAxisData: ['点', '击', '柱', '子', '或', '者', '两', '指', '在'],
  yAxisProps: {
    type: "value",
    splitLine: {//是否显示 y轴横线
      show: true
    },
    show: true
  },
  seriseData: [220, 182, 191, 234, 290, 330, 310, 120, 362],//数据
  itemStyle: "#188df0",
  emphasisItemStyle: '#f00',
  // emphasisItemStyle: [//柱状图的高亮颜色 渐变
  //   { offset: 0, color: '#f00' },
  //   { offset: 0.7, color: '#2378f7' },
  //   { offset: 1, color: '#83bff6' }
  // ],
  stackFlag: false,//柱状图是否显示每个柱条的数量
  stackLabel: {
    show: false,
  },
  borderRadius: 10,
  formatCallBack: (params: any) => {
    if (!params || params.length == 0 || !Array.isArray(params)) return
    let fromatStr = ""
    params.forEach((ele: any) => {
      fromatStr += '<div style="border-bottom:1px solid #ccc;"><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + ele.color + '"></span>' + ele.data + "</div>"
    })
    return fromatStr
  }
})

</script>

业务场景三

效果

业务组件调用代码

<template>
<barCom :domId="3" :title="barComPropsHorizontal.title" :xAxisProps="barComPropsHorizontal.xAxisProps"
          :xAxisData="barComPropsHorizontal.xAxisData" :yAxisData="barComPropsHorizontal.yAxisData"
          :yAxisProps="barComPropsHorizontal.yAxisProps" :seriseData="barComPropsHorizontal.seriseData"
          :emphasisItemStyle="barComPropsHorizontal.emphasisItemStyle" :itemStyle="barComPropsHorizontal.itemStyle"
          :stackFlag="barComPropsHorizontal.stackFlag" :stackLabel="barComPropsHorizontal.stackLabel"
          :borderRadius="barComPropsHorizontal.borderRadius" :formatCallBack="barComPropsHorizontal.formatCallBack">
        </barCom>
</template>
<script lang="ts" setup>
import barCom from "../../components/echartsCom/barCom.vue"
const barComPropsHorizontal = reactive({
  title: "柱状图-横向",
  xAxisProps: {
    type: "value",
    boundaryGap: [0, 0.01]
  },
  xAxisData: [],
  yAxisProps: {
    type: "category",
    // boundaryGap: false,
  },
  yAxisData: ['点', '击', '柱', '子', '或', '者', '两', '指', '在'],
  seriseData: [220, 182, 191, 234, 290, 330, 310, 120, 362],//数据
  itemStyle: [//柱状图的默认颜色 渐变
    { offset: 0, color: '#f00' },
    { offset: 0.5, color: '#188df0' },
    { offset: 1, color: '#188df0' }
  ],
  emphasisItemStyle: [//柱状图的高亮颜色 渐变
    { offset: 0, color: '#f00' },
    { offset: 0.7, color: '#2378f7' },
    { offset: 1, color: '#83bff6' }
  ],
  stackFlag: false,//柱状图是否显示每个柱条的数量
  stackLabel: {
    show: false,
  },
  borderRadius: 10,
  formatCallBack: (params: any) => {
    if (!params || params.length == 0 || !Array.isArray(params)) return
    let fromatStr = ""
    params.forEach((ele: any) => {
      fromatStr += '<div style="border-bottom:1px solid #ccc;"><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + ele.color + '"></span>' + ele.data + "</div>"
    })
    return fromatStr
  }
})


</script>

基础组件

<template>
    <div style="width: 100%; height: 100%" :id="'BarEchartDom' + propsVal.domId"></div>
</template>
  
<script setup lang='ts'>
import * as echarts from "echarts";
let myChart: any = null
const propsVal = defineProps({
    domId: {//加个唯一标识 必须是唯一的
        type: Number,
        default: Math.random()
    },
    title: {
        type: String,
        default: '柱状图'
    },
    legendDataList: {//图例组件的数据
        type: Array,
        default: []
    },
    legendProps: {//图例组件的基本配置
        type: Object,
        default: {
            right: 30,
            top: 30,
            itemHeight: 10,
            itemGap: 10,
            icon: "circle",//可选 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
            textStyle: {//文字颜色
                color: "#333333"
            }
        }
    },
    grid: {//网格的配置
        type: Object,
        default: {
            top: "15%",//组件距离容器 上侧 的距离
            left: "3%",//组件距离容器 左侧 的距离
            right: "4%",//组件距离容器 右侧 的距离
            bottom: "3%",//组件距离容器 下侧 的距离
            containLabel: true,//组件距离容器 上侧 的距离
        }
    },
    FeatureList: {//工具配置项显示 
        type: Array,
        default: []//['saveAsImage','restore','dataView',"dataZoom",'magicType','brush']
    },
    seriseData: {
        type: Array,
        default: []
    },
    xAxisData: {//x 坐标轴数据 
        type: Array,
        default: []
        //'value' 数值轴，适用于连续数据
        // 'category'
        // time 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度
        // 'log' 对数轴。适用于对数数据。
    },
    xAxisProps: {//x 坐标轴配置
        type: Object,
        defualt: {
            type: "category",
            boundaryGap: false,
        }
    },
    yAxisProps: {//y 坐标轴配置
        type: Object,
        default: {
            type: "value",
        }
    },
    yAxisData: {//x 坐标轴数据 
        type: Array,
        default: []
        //'value' 数值轴，适用于连续数据
        // 'category'
        // time 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度
        // 'log' 对数轴。适用于对数数据。
    },
    itemStyle: {//柱状图的默认颜色 渐变
        type: Object,
        default: {

        }
    },
    emphasisItemStyle: {//柱状图的高亮颜色 渐变
        type: Object,
        default: {

        }
    },
    stackFlag: {//是否显示柱状图的 柱条顶部数据
        type: Boolean,
        default: false
    },
    stackLabel: {// 柱条顶部数据 样式
        type: Object,
        default: {

        }
    },
    borderRadius: {//显示圆角
        type: Number,
        default: 0
    },
    formatCallBack: {//提示数据格式化
        type: Function,
        default: () => { }
    }
})
onMounted(() => {
    const BarEchartDomEl = document.getElementById("BarEchartDom" + propsVal.domId);
    myChart = echarts.init(BarEchartDomEl);
    console.log("mychart-bar-003", option)
    myChart.setOption(option);

})
const handleSeriesData = () => {

    let seriesData = []

    let resultItemColor = Array.isArray(propsVal.itemStyle) ? new echarts.graphic.LinearGradient(0, 0, 1, 1, propsVal.itemStyle) : propsVal.itemStyle
    let resultEmphasisColor = Array.isArray(propsVal.emphasisItemStyle) ? new echarts.graphic.LinearGradient(0, 0, 1, 1, propsVal.emphasisItemStyle) : propsVal.emphasisItemStyle
    // LinearGradient(0, 0, 1, 1, 控制渐变方向
    const item: any = {
        type: 'bar',
        showBackground: false,
        stack: 'Total',
        // label: {
        //     show: true,
        //     position: 'top'
        // },
        itemStyle: {
            borderRadius: propsVal.borderRadius,
            color: resultItemColor
        },
        emphasis: {
            itemStyle: {
                color: resultEmphasisColor
            }
        },

        data: propsVal.seriseData
    }
    item.label = propsVal.stackLabel
    seriesData.push(item)
    return seriesData
}
const option = {
    tooltip: {
        trigger: "axis",
    },
    title: {
        text: propsVal.title,
    },
    xAxis: {
        data: propsVal.xAxisData,
        ...propsVal.xAxisProps
    },
    yAxis: {
        ...propsVal.yAxisProps,
        data: propsVal.yAxisData
    },
    series: handleSeriesData(),
    formatter: function (params: any) {
        console.log("parmas", params)
        return propsVal.formatCallBack(params)
    }
};
</script>
  
<style></style>