echarts画的柱状图

已于 2023-07-21 13:49:27 修改
阅读量1.1k 收藏
点赞数
文章标签： echarts javascript 前端
于 2021-12-14 15:41:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45646663/article/details/121928522
版权

在这里插入图片描述

<template>
    <div id="airportflight" style="width:100%;" class="bar-wrapper" ref="airportflight"></div>
</template>

<script>
  import Echarts from 'echarts'
    import * as echarts from 'echarts';
  export default {
    name: "airportflight",
    data() {
      return {

      }
    },
    props: {
		//数组
	    DrugTherapyChart: {
	      type: Array,
	      default: () => []
	    },
        ChartHeight:'',
        ChartWidth:'',
    },
    // props: ['yData','xData','seriesData','barLegend', 'color'],
    created() {
        let Create2 =
            setTimeout(() => {
            clearTimeout(Create2)
            this.fetchData()  
            }, 300)
    },
    mounted: function () {
        let clientWidth2 = document.documentElement.clientWidth -200;
        let myChart = document.getElementById('airportflight');
        myChart.style.width = clientWidth2 +'px';
        myChart.style.height = this.ChartHeight;
        Echarts.init(myChart);
        let _this = this;
        window.addEventListener("resize", function () {
        let myChart = document.getElementById('airportflight');
        myChart.style.width = clientWidth2 +'px';
        myChart.style.height = this.ChartHeight;
        });
    },
    methods: {
        barColor(){
            var colorList = [
                                '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                                '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                                '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0',
                                '#FFB7DD','#660077','#FFCCCC','#FFC8B4','#550088',
                                '#FFFFBB','#FFAA33','#99FFFF','#CC00CC','#FF77FF',
                                '#CC00CC','#C63300','#F4E001','#9955FF','#66FF66',
                                '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                                '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                                '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0',
                                '#FFB7DD','#660077','#FFCCCC','#FFC8B4','#550088',
                                '#FFFFBB','#FFAA33','#99FFFF','#CC00CC','#FF77FF',
                                '#CC00CC','#C63300','#F4E001','#9955FF','#66FF66'
                                
                                
                        ];
            return colorList;              
        },
        fetchData() {
            console.log(4445555,this.DrugTherapyChart)
            var chartDom = document.getElementById('airportflight');
            var myChart = echarts.init(chartDom);
            var option;
            let that = this;
            // console.log(6666,document.getElementById("airportflight").style.height)
            this.$nextTick(()=>{
        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                },
                //提示框浮层内容格式器，支持字符串模板和回调函数两种形式。
                formatter: function (params) {
                    // console.log(197,params)
                    var tar;
                    if (params[1].value !== '-') {
                        tar = params[1];
                    }
                    else {
                        tar = params[2];
                    }
                    let StartDate2 = ''
                    StartDate2 = that.DrugTherapyChart.yAxis[tar.dataIndex].Usage.StartDate
                    let GiveStrength = ''
                    GiveStrength = that.DrugTherapyChart.yAxis[tar.dataIndex].Usage.GiveStrength + ' ' + 
                        that.DrugTherapyChart.yAxis[tar.dataIndex].Usage.Frequency + ' ' +  
                        that.DrugTherapyChart.yAxis[tar.dataIndex].Usage.AdminRoute
                    return '药品名：' + tar.name + '<br/>' + '天数：' + tar.value + '<br/>' + '开嘱日期：' + StartDate2;
                    // return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value + '<br/>' + '日期' + StartDate2;
                }
            },
            
            grid: {
                // height: 300,
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                max: function (value) {
                    return value.max + 4;
                }
            },
            yAxis: {
                type: 'category',
                splitLine: {show: false},
                lineStyle: {
                    width:1
                },
                data: function () {
                    var list = [];
                    that.DrugTherapyChart.yAxis&&that.DrugTherapyChart.yAxis.forEach((item) => {
                        list.push(item.DrugName);
                    });
                    return list;
                }()
            },
            series: [
                {
                    name: '辅助',
                    type: 'bar',
                    stack: '总量',
                    itemStyle: {
                        barBorderColor: 'rgba(0,0,0,0)',
                        color: 'rgba(0,0,0,0)'
                    },
                    emphasis: {
                        itemStyle: {
                            barBorderColor: 'rgba(0,0,0,0)',
                            color: 'rgba(0,0,0,0)'
                        }
                    },
                    // data: [0, 2, 2, 3, 1, 1]
                    data: function () {
                        var list = [];
                        // let aa = 0
                        // list.push(aa);
                        that.DrugTherapyChart.Series&&that.DrugTherapyChart.Series.forEach((item,index) => {
                            if (item.Name=='辅助') {
                                list = item.Data
                            }
                            // aa += item.Usage.Duration
                            // list.push(aa);
                        });
                        return list;
                    }()
                },
                {
                    name: '长嘱',
                    type: 'bar',
                    stack: '总量',
                    label: {
                        show: true,
                        position: 'insideLeft',
                        color:'#333',
                        fontSize:10,
                        formatter:function(params) {
                            let GiveStrength = ''
                            GiveStrength = that.DrugTherapyChart.yAxis[params.dataIndex].Usage.GiveStrength + ' ' +
                            that.DrugTherapyChart.yAxis[params.dataIndex].Usage.Frequency + ' ' +  
                            that.DrugTherapyChart.yAxis[params.dataIndex].Usage.AdminRoute
                            return GiveStrength 
                            //return that.DrugTherapyChart.yAxis[params.dataIndex].Usage.AFG
                        }
                    },
                    // data: ['2', 3, 3, 4, '-', '-']
                    // color: ["#d83c4d", "#e95831", "#e95831", "#e95831", "#ee8131", "#f9b12f", "#f9b12f", "#fcd81d", "#c8ce2f", "#8cb539"],
                    data: function () {
                        var list = [];
                        that.DrugTherapyChart.Series&&that.DrugTherapyChart.Series.forEach((item,index) => {
                            if (item.Name=='长嘱') {
                                list = item.Data
                            }
                        });
                        return list;
                    }(),
                    itemStyle: {   
                    //通常情况下：
                        normal:{
                    // 每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                            color: function (params){
                                let ColorList = []
                                that.DrugTherapyChart.yAxis&&that.DrugTherapyChart.yAxis.forEach((item) =>{
                                    ColorList.push(item.Usage.Color)
                                })
                                return ColorList[params.dataIndex];
                            }
                        }
                        
                    },
                    barWidth : '50%',//柱图宽度
                },

                // {
                //     name: '临嘱',
                //     type: 'bar',
                //     stack: '总量',
                //     label: {
                //         show: true,
                //         position: 'insideLeft',
                //         color:'#333',
                //         fontSize:10,
                //         formatter:function(params) {
                //             let GiveStrength = ''
                //             GiveStrength = that.DrugTherapyChart.yAxis[params.dataIndex].Usage.GiveStrength + ' ' +
                //                 that.DrugTherapyChart.yAxis[params.dataIndex].Usage.Frequency + ' ' +  
                //                 that.DrugTherapyChart.yAxis[params.dataIndex].Usage.AdminRoute
                //             return GiveStrength 
                //         }
                //     },
                //     // data: ['-', '-', '-', '-', 1, 1]
                //     data: function () {
                //         var list = [];
                //         that.DrugTherapyChart.Series.forEach((item,index) => {
                //             if (item.Name=='临嘱') {
                //                 list = item.Data
                //             }
                //         });
                //         return list;
                //     }(),
                //     color: '#91cc75',
                //     barWidth : '50%',//柱图宽度
                // },

            ]
        };

        option && myChart.setOption(option);
        //如果给浏览器窗口放大放小，图表要跟着变动大小
        window.onresize = () => {
	       console.log(2333)
	        myChart.resize();
	      }
        })



        // let bar = Echarts.init(this.$refs.airportflight);
        // console.log('this.barLegend',this.barLegend)
        // console.log('this.xData',this.xData)
        // console.log('this.yData',this.yData)
        // console.log('this.color',this.color)
        // console.log('this.seriesData',this.seriesData)
        // const options = {
        //   tooltip: {
        //     trigger: 'axis',
        //     axisPointer: {
        //       // type: 'cross',  // y轴辅助显示线
        //       crossStyle: {
        //         color: '#999'
        //       }
        //     }
        //   },
        //   color: this.color,
        //   legend: this.barLegend,
        //   xAxis: this.xData,
        //   yAxis: this.yData, // y轴信息
        //   series: this.seriesData,
        // };
        // bar.setOption(options);
      }
    },
    watch: {
        DrugTherapyChartChange(value){
            console.log(330,value)
            if (value == true) {
                this.fetchData()
            }
        }
    //   yData(value) {
    //     this.fetchData();
    //   },
    //   seriesData(val) {
    //     console.log(111)
    //     this.fetchData();
    //   }
    }
  }
</script>

<style scoped>
  .bar-wrapper {
    width: calc(100%);
    height: calc(100%);
  }
</style>
靓靓的圆子
关注
echart 环形图柱状图
02-21
用echart实现的柱状图，折线图，环形图，柱状环形图。
Vue 中 Echarts实现分段式柱形图
森海か的博客
12-08 2016
vue echarts 断续的柱形图（象形柱图）实现
使用Echarts绘制柱状图
最新发布
qq_52569656的博客
06-25 1413
本文基于React18+Echarts5来实现柱状图表，主要就是记录了一些常见的问题处理方式，希望对你有所帮助吧。
echarts之柱状图样式操作
GSZTK的博客
07-24 2094
echarts柱状图样式设置
echarts柱状图的样式调整及应用
qq_45991812的博客
03-09 6446
/symbolOffset: [0,-5],//轴线两边的箭头的偏移，如果是数组，第一个数字表示起始箭头的偏移，第二个数字表示末端箭头的偏移；data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], //坐标轴上显示的文字。data: [820, 932, 901, 934, 1290, 1330, 1320], //y轴数据。color: 'rgba(85, 88, 95, 1)' //x轴坐标的文字颜色。
echarts压缩js（包含柱状图闪烁效果）
05-14
本资源为本人二次打包的echarts压缩js，包含柱状图闪烁效果，也可学习我的教程后，自行打包，谢谢大家！
echarts实现动态柱状图
12-19
ECharts，作为一款由百度开发的开源JavaScript图表库，提供了丰富的图表类型和强大的交互功能，使得动态柱状图的实现变得简单高效。本篇文章将详细探讨如何使用ECharts来创建动态柱状图，满足大屏可视化对实时数据...
echarts-省份地图+柱状图组合.zip
03-26
ECharts 是一个由百度开发的开源 JavaScript 数据可视化库，它提供了丰富的图表类型，如柱状图、折线图、饼图、散点图等，并且支持地图图表，包括省份地图。"echarts-省份地图+柱状图组合.zip" 是一个包含 ECharts ...
echarts图表柱状图折线图动态轮播tooltip窗
08-12
引入该包，在 myChart.setOption(option)注册表后，调用该方法 tools.loopShowTooltip(myChart, option, { loopSeries: true }) 注：myChart为echarts实例，option为该表配置。配置中必须要有tooltip的配置才可生效
在Echarts 地图上画柱状图
06-26
要实现“在ECharts 地图上画柱状图”，我们需要以下几个步骤： 1. **引入ECharts库**：在HTML文件中，通过CDN或者本地文件引入ECharts的JS库。例如： ```html <script src="https://cdn.jsdelivr.net/npm/echarts...
Echarts实现胶囊柱状图
普通程序员的随笔
11-16 5604
最近项目中有做大屏的需求，于是赶鸭子上架的我就开始学习研究图表相关知识。自己在antV和Echarts之间摇摆不定，再加上同事推荐了我一个类阿里的DataV，一共三个图表框架。 查阅了很多资料，每一种也都粗略的研究了一下：AntV最新，也最灵活，但是学习成本相应也高，这个我后期会继续学习；DataV，使用简单，但是文档API较少，社区不成熟；最后我还是选择了Echarts。 目录类DataVEcharts 柱状图配置详解Echarts 实现胶囊柱状图 类DataV 首先是DataV，还是比较方便的，有兴.
echartes 柱状图 每跟柱子之间互不关联
qq_36869635的博客
03-28 674
我司近期有个图表功能，需求是柱形图没个分类比较，BUT 每个分类里面还有小类型，不同分类之间的小类型之间互不相关。 苦思良久，干 drawCharts(data){ let _this = this; let tjs = []; let jsyd = []; let nyd = []; let wlyd = []; let l
【Echarts第二篇】自定义柱状图的样式
Wonder_Risk的博客
03-23 4901
以使用频率较高的颜色开始走起~！ 一.自定义颜色 如果系列没有设置颜色，则会依次循环从该列表中取颜色作为系列颜色。 官方文档给出的默认颜色列表为: [’#c23531’,’#2f4554’, ‘#61a0a8’, ‘#d48265’, ‘#91c7ae’,’#749f83’, ‘#ca8622’, ‘#bda29a’,’#6e7074’, ‘#546570’, ‘#c4ccd3’] 但实际上...
ECharts基础柱状图
shaonianmoyou的博客
08-23 9304
。
01 【eCharts样式定制系列】柱状图修改柱状颜色、柱状形状等
热门推荐
X北辰北的博客
01-13 1万+
描述 在目前的项目中，根据UI设计稿需要实现一个带有大屏的系统首页，在此首页上要添加地图和一些eCharts图表。但是根据UI设计稿，如果要达到美观的目的，需要对eCharts进行定制。接下来我们先对第一个图表——柱状图，进行定制。 我们先来看一下UI设计稿中的柱状图： 其次再看一下eCharts官网默认的柱状图： 除去DIV内边框的晕眩效果可以通过CSS或者直接拿切图...
深夜学姐问我在Vue中Echarts柱状图如何自定义顶部亮点
Web_chicken的博客
10-09 5357
深夜学姐问我在Vue中Echarts柱状图如何自定义顶部亮点 先看效果图 我们可以看到图中图表不仅有渐变色，同时柱状图顶部位置有一个不相同的顶部亮点(图片) 接下来，我们一起来实现一下这个效果 1. HTML部分 <div id="ParkingLotLoadRanking" ref="ParkingLotLoadRanking" style="height:16.875rem;width:25%;"></div> 2. JS部分 // 获取DOM元素 let m
Echarts常用柱状图
m0_51431448的博客
04-04 3384
最近做可视化比较多，就常用的图表类型做了一下总结。 因为做可视化的图表代码量非常大，所以会把echarts图表单独抽离出来，封装成一个组件，也可以复用，所以这里我直接把封装的组件直接放在这里，是可以直接拿来用的，根据所需稍作修改即可。 这里都是用的vue3，其实和vue2差不多，各式各样的花里胡哨的图表无非就是option配置不同，如果使用的是vue2，在写法上稍作修改即可。 上篇博客有写 echarts 图表组件封装模板，vue2、vue3都有可以参考，链接附上echarts图表组件封装模板 1.
echarts画柱状图
09-21
使用Echarts画柱状图主要包括以下几个步骤： 1. 安装Echarts库：通过NPM安装Echarts库，或者从官网下载Echarts的源码文件。 2. 引入Echarts库：在HTML文件中引入Echarts的JS文件。 3. 准备一个容器：在HTML文件中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值