echarts二级菜单柱状图

最新推荐文章于 2023-04-11 14:18:20 发布
最新推荐文章于 2023-04-11 14:18:20 发布
阅读量752 收藏 1
点赞数 1
分类专栏： 前端笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43619459/article/details/115261436
版权

Echarts 柱状图 二级菜单 数据可视化 前端开发
关键词由CSDN通过智能技术生成

文章目录

1. 需求

  • 将普通柱状图表改成能够显示二级菜单销售量的图表
    1. 原图：
      在这里插入图片描述
    2. 修改后的图形
      在这里插入图片描述

2. 解决方法

01 | 使用字符串拼接法生成图表
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <title>Document</title>

    <style>
		.histogram_box{
			margin: 0 auto;
			margin-top: 69px;
			width: 878px;
		}
		.header{
			height: 52px;
			line-height: 51px;
		}
		.header .span1{
			width: 6px;
			height: 20px;
			background: #2FAFEC;
			display: inline-block;
		}
		.header .title{
			font-size: 18px;
			font-family: Arial-BoldMT;
			font-weight: bold;
			line-height: 47px;
			color: #333333;
			display: inline-block;
		}
		.header .botton1,.botton2,.select{
			display: inline-block;
			float: right;
			margin-left: 20px;
			padding:0 3px;
			background: #FFFFFF;
			border: 2px solid #CCCCCC;
			opacity: 1;
			border-radius: 7px;
			line-height: 36px;
			text-align: center;
			cursor: pointer;
		}
		.header .botton2{
			border: 2px solid #2FAFEC;
			border-radius: 7px;
			color: #2FAFEC;
		}
		.histogram{
			width: 878px;
			height: auto;
			background: #FFFFFF;
			border: 1px solid #E6E6E6;
			border-radius: 24px;
			position: relative;
			padding-bottom: 60px;
		}
		.his_cont{
			position: relative;
			margin-left: 36px;
			z-index: 99;
			padding-top: 50px;
		}
		.his_item{
			position: relative;
			height: 5px;
			line-height: 20px;
			vertical-align:middle;
			margin-bottom: 30px;
		}
		.arrows{
			width:0;
			height:0; 
			font-size:0;
			border-width:8px;
			border-style:solid;
			border-color:#6AAACE transparent transparent;
			overflow:hidden; 
			transform: rotate(-90deg);
			z-index: 99;
			display: inline-block;
			cursor: pointer;
			vertical-align:middle;
		}
		.arrows_active{
			transform: rotate(0deg);
            
		}
		.his_title{
			width: 188px;
			/* height: 40px; */
			color: #6AAACE;
			font-size: 15px;
			text-align: right;
			display: inline-block;
			vertical-align:middle;
		}
		.his_width{
			height: 16px;
			background: #2FAFEC;
			opacity: 0.88;
			margin-left: 10px;
			margin-right: 12px;
			display: inline-block;
			vertical-align:middle;
		}
		.his_number{
			width: 37px;
			height: 19px;
			line-height: 19px;
			font-size: 17px;
			font-family: ArialMT;
			color: #2FAFEC;
			opacity: 1;
			display: inline-block;
			vertical-align:middle;
		}
		.his_item_list{
			display: none;
		}
		.his_item_item{
			position: relative;
			padding-left: 15px;
			margin-bottom: 30px;
			height: 5px;
		}
		.his_item_item .his_width{
			background: #808080;

		}
		
		.his_bg{
			width: 592px;
			height: 100%;
			position: absolute;
			right: 36px;
			/* background-color: #E6E6E6; */
			z-index: 0;
			/* border-bottom: 1px solid #E6E6E6; */
			border-bottom: 1px transparent black;
            
		}
		.his_bg_item{
			width: 0px;
			height: 100%;
			border: 1px solid #E6E6E6;
			margin-right: 50px;
			float: left;
			position: relative;
		}
		.his_xtext{
			position: absolute;
			bottom: -30px;
			left: -17px;
			text-align: left;
            color: #6AAACE;
		}
    </style>
</head>
<body>
    <div class="histogram_box" id="histogram_box">
        
        <div class="histogram" id="bar">
            <div class="his_cont" id="his_cont">
                <div class="his_bg">
                    <div class="his_bg_item"><div class="his_xtext" style="left: -3px;"></div></div>
                    <div class="his_bg_item" style="opacity: 0;"><div class="his_xtext" style="opacity: 0;"></div></div>
                    <div class="his_bg_item"><div class="his_xtext"></div></div>
                    <div class="his_bg_item" style="opacity: 0;"><div class="his_xtext" style="opacity: 0;"></div></div>
                    <div class="his_bg_item"><div class="his_xtext" ></div></div>
                    <div class="his_bg_item" style="opacity: 0;"><div class="his_xtext" style="opacity: 0;"></div></div>
                    <div class="his_bg_item"><div class="his_xtext"></div></div>
                    <div class="his_bg_item" style="opacity: 0;"><div class="his_xtext" style="opacity: 0;"></div></div>
                    <div class="his_bg_item"><div class="his_xtext" ></div></div>
                    <div class="his_bg_item" style="opacity: 0;"><div class="his_xtext" style="opacity: 0;"></div></div>
                    <div class="his_bg_item"><div class="his_xtext"></div></div>
                </div>
                <div id="bar_box">
                </div>
            </div>
        </div>
    </div>

    <script>
        let barList=[
			{
				"name": "服饰",
				"value": 6000,
                "percent": "60%",
                "childNode": [
                    {
                    "name": "服饰1",
                    "value": 3000,
                    "percent": "50%"
                    },
                    {
                    "name": "服饰2",
                    "value": 2000,
                    "percent": "50%"
                    },
                    {
                    "name": "服饰3",
                    "value": 1000,
                    "percent": "50%"
                    },
                ]
			},
			{
				"name": "电子产品",
				"value": 4000,
                "percent": "60%",
                "childNode": [
                    {
                    "name": "电子产品1",
                    "value": 1000,
                    "percent": "50%"
                    },
                    {
                    "name": "电子产品2",
                    "value": 1500,
                    "percent": "50%"
                    },
                    {
                    "name": "电子产品3",
                    "value": 2500,
                    "percent": "50%"
                    },
                ]
			},
			{
				"name": "图书",
				"value": 3000,
                "percent": "60%"
			}
		
		]


        let numlist=barList.map(item=>{
            return item.value
        })
        let max=Math.ceil(Math.max(...numlist))//获取数组最大值
        let step
        if(max<=10){//获取标签步数
            step=1
        }else if(max<=100){
            step=Math.ceil(max/10)
        }else if(max<=1000){
            step=Math.ceil(max/100)*10
        }else if(max<=10000){
            step=Math.ceil(max/1000)*100
        }else if(max<=100000){
            step=Math.ceil(max/10000)*1000
        }else{
            step=Math.ceil(max/10)
        }

        let titleboxList=document.querySelectorAll('.his_xtext');//获取所有x轴的标签 
        for(let i=0,s=0;i<=10;s=s+step,i++){//循环生成x轴的标签
            titleboxList[i].innerText=s
        }
        
  
        let bar_box=document.getElementById('bar_box')
        let strBar=''
        for(let c=0;c<barList.length;c++){
            strBar+='<div class="his_list">'
            strBar+='<div class="his_item" οnclick="isShow(his_item_list'+(c+1)+',arr'+(c+1)+')">'
            strBar+='<div class="arrows" id="arr'+(c+1)+'"></div>'
            strBar+='<div class="his_title">'+barList[c].name+'</div><div class="his_width" style="width:'+barList[c].value/titleboxList[10].innerText*520+'px; background: -webkit-linear-gradient(left,#FFFFFF,#44A1FF); "></div><div class="his_number">'+barList[c].value+'</div></div>'
            strBar+='<div class="his_item_list" id="his_item_list'+(c+1)+'">'
            if(barList[c].childNode!=undefined){
                for(let m=0;m<barList[c].childNode.length;m++){
                    strBar+='<div class="his_item_item">'
                    strBar+='<div class="his_title" style="color: #AEAEAE;">'+barList[c].childNode[m].name+'</div><div class="his_width" style="width:'+barList[c].childNode[m].value/titleboxList[10].innerText*520+'px; background: -webkit-linear-gradient(left,#FFFFFF,#9B9B9B); "></div><div class="his_number">'+barList[c].childNode[m].value+'</div>'
                    strBar+='</div>'
                }
            }
            strBar+='</div>'				
            strBar+='</div>'
        }
        bar_box.innerHTML=strBar

        //是否折叠
		function isShow(oDiv,oArr){
		  oDiv.style.display = oDiv.style.display=='block'?'none':'block',
		  oArr.className = oArr.className=='arrows arrows_active'?'arrows':'arrows arrows_active'
		
        }



    </script>

</body>
</html>
  • 效果图：
    在这里插入图片描述
02 | 使用Echarts方法生成
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!-- <script type="text/javascript" src="./echarts.js"></script> -->
<!-- <script src="https://cdn.bootcss.com/echarts/3.7.1/echarts.min.js"></script> -->
<script src="https://cdn.bootcss.com/echarts/5.0.2/echarts.min.js"></script>

<body>

    <div id="main" style="width: auto;"></div>

</body>

<script type="text/javascript">
    /**
     * 核心思想就是将每一项的开合状态记录到close对象中
     * 在将每一项的bar的子级元素都完整添加到data数据中 哪怕会有冗余
     * 在根据被点击的对象位置获取其中的children 添加到给echarts显示的对象中
     * 在关闭bar时就根据close状态来判断数量
     * 然后再用splice去除echarts显示的对象中的元素
     */
     let response = {
         "color": ["#6AAACE", "#808080", "#FFA500", "#681752"],
         "data": [{
                 "name": "服饰",
                 "percent": "60",
                 "id": '1',
                 "children": [{
                         "name": "服饰1",
                         "id": '1-1',
                         "percent": "40"
                     },
                     {
                        "name": "服饰2",
                         "id": '1-2',
                         "percent": "50",
                         "children": [{
                                 "name": "31",
                                 "id": '1-2-1',
                                 "percent": "80"
                             },
                            {
                                 "name": "32",
                                "id": '1-2-2',
                                 "percent": "70",
                                 "children": [{
                                         "name": "we",
                                         "id": '1-2-2-1',
                                         "percent": "120"
                                     },
                                     {
                                         "name": "qq",
                                         "id": '1-2-2-2',
                                         "percent": "10"
                                     },
                                     {
                                         "name": "af",
                                         "id": '1-2-2-3',
                                         "percent": "70"
                                     }
                                 ]
                             },
                             {
                                 "name": "33",
                                 "id": '1-2-3',
                                 "percent": "10"
                             }
                         ]
                     },
                     {
                         "name": "服饰3",
                         "id": '1-3',
                         "percent": "70"
                     }
                ]
             },
             {
                "name": "电子产品",
                 "id": '2',
                 "percent": "30",
                 "children": [{
                         "name": "服饰21",
                         "id": '2-1',
                         "percent": "40"
                     },
                     {
                         "name": "服饰22",
                         "id": '2-2',
                         "percent": "50"
                     },
                     {
                         "name": "服饰23",
                         "id": '2-3',
                         "percent": "70"
                     }
                 ]
             },
             {
                 "name": "图书",
                 "id": '3',
                 "percent": "50"
             }
         ]
     }


    function initResponse(target) {
        target.forEach(item => { // 用map返回无法对传参的原本对象进行修改 只能用引用的方式修改才会起作用 也就是object.attribute = ... 修改
            close[item['id']] = true // 对close进行初始化 根据每个id来进行赋值
            let childNode = item ?.children
            if (!!childNode) {
                initResponse(childNode)
            }
        })
    }

    function refresh() {
        let height = chartData.length * 35 + 120
        myChart.resize({
            height: height
        }) // 计算一个高度固定
        myChart.setOption(option)
    
    }

 
    function findLength(target) {
        let count = 0
        target.forEach(item => {
            count++
            let childNode = item ?.children
            if (!!childNode && !close[item.id]) {
                close[item.id] = !close[item.id]
                count += findLength(childNode)
            }
        })
        return count
    }


    let close = {}
    let data = response.data
    initResponse(data)
    let color = response.color
    let chartData = []

    data.forEach(item => {
        chartData.push({
            name: item['name'],
            value: item['percent'], // 把每一个bar都插入子元素
            itemStyle: {
                // color: color[item['id'].split('-').length - 1]
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                        offset: 0,
                        // color: '#45bdc5'
                        color: '#ffffff'
                    },
                    {
                        offset: 1,
                        color: color[item['id'].split('-').length - 1]
                    }]),
                }
            },
            children: item['children'],
            id: item['id']
        })
    })
    let label = Object.assign([], chartData.map(item => {
        return {
            // value: '▶' + item['name'],
            value: (function () {
                if (!!item['children']) {
                    return '▶' + item['name'];
                } else {
                    return item['name'];
                }
            })(),
            textStyle: {
                color: color[item['id'].split('-').length - 1]
            },
            id: item['id']
        }
    }))

    const myChart = echarts.init(document.getElementById('main'));
    const option = {

        animationEasing: 'elasticOut',
        xAxis: {
            type: 'value'
        },
        yAxis: {
            type: 'category',
            data: label,
            animation: false,
            triggerEvent: true,
            axisLine: false,
            axisTick: false
        },
        series: [{
                data: chartData,
                type: 'bar',

                itemStyle: {
                    normal: {
                      color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                        offset: 0,
                        // color: '#45bdc5'
                        color: '#ffffff'
                      },
                      {
                        offset: 1,
                        color: 'rgba(113,237,255,0.1)'
                      }]),
                    }
                },
                label: {
                    show: true, //开启显示
                    position: 'right', //在上方显示
                    textStyle: { //数值样式
                        color: '#808080',
                        fontSize: '12'
                    }
                }


            }


        ]
    };

    myChart.on('click', function (params) {

        if (params.componentType == "xAxis") {
            // alert("单击了" + params.value + "x轴标签");
        } else if (params.componentType == "yAxis") {

            labelname = (params.value[0] == '▶' || params.value[0] == '▼') ? params.value.slice(1) : params
                .value

            labelindex = chartData.findIndex(item => {

                return ((item['name'][0] == '▶' || item['name'][0] == '▼') ? item['name'].slice(1) :
                    item.name) === labelname
            })
            // console.log(labelindex)
            let index = labelindex
            // 将开合状态交给close全局对象进行判断
            if (close[chartData[index].id]) {
                let childNode = chartData[index]?.children
                if (!!childNode) {
                    let childData = []
                    // 根据点击节点的children来进行添加结点
                    childNode.forEach(item => {
                        childData.push({
                            // name: '▶' +item['name'],
                            name: (function () {
                                if (!!item['children']) {
                                    return '▶' + item['name'];
                                } else {
                                    return item['name'];
                                }
                            })(),
                            value: item['percent'],
                            itemStyle: {
                                // color: color[item['id'].split('-').length - 1]
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                        offset: 0,
                                        // color: '#45bdc5'
                        color: '#ffffff'
                                    },
                                    {
                                        offset: 1,
                                        color: color[item['id'].split('-').length - 1]
                                    }]),
                                }
                            },
                            children: item['children'],
                            id: item['id']
                        })
                    })
                    close[chartData[index].id] = false // 修改开合状态

                    chartData.splice(index, 0, ...childData)
                    let cp = Object.assign({}, label[index])
                    label.splice(index, 1, {
                        ...cp,
                        value: '▼' + cp['value'].slice(1)
                    })
                    // 直接对 option.series[0].data 的数据进行更新也是可以的 更加方便
                    // 直接对 option进行更新就可以不用变量chartData.splice触发watch来进一步触发option更新
                    label.splice(index, 0, ...childData.map(item => {
                        return {
                            value: item['name'],
                            textStyle: {
                                color: color[item['id'].split('-').length - 1]
                            }
                        }
                    }))

                }
            } else {
                let childrenLength = findLength(chartData[index].children)
                close[chartData[index].id] = true
                let cp = Object.assign({}, label[index])
                label.splice(index, 1, {
                    ...cp,
                    value: '▶' + cp['value'].slice(1)
                })
                chartData.splice(index - childrenLength, childrenLength)
                label.splice(index - childrenLength, childrenLength)
            }
            refresh()
        } else {
            // alert("单击了"+params.name+"柱状图"+params.value);  
            let index = params.dataIndex
            // console.log(index)

            // 将开合状态交给close全局对象进行判断
            if (close[chartData[index].id]) {
                let childNode = params.data ?.children
                if (!!childNode) {
                    let childData = []
                    // 根据点击节点的children来进行添加结点
                    childNode.forEach(item => {
                        childData.push({
                            name: (function () {
                                if (!!item['children']) {
                                    return '▶' + item['name'];
                                } else {
                                    return item['name'];
                                }
                            })(),
                            value: item['percent'],
                            itemStyle: {
                                // color: color[item['id'].split('-').length - 1]
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                        offset: 0,
                                        // color: '#45bdc5'
                        color: '#ffffff'
                                    },
                                    {
                                        offset: 1,
                                        color: color[item['id'].split('-').length - 1]
                                    }]),
                                }
                            },
                            children: item['children'],
                            id: item['id']
                        })
                    })
                    close[chartData[index].id] = false // 修改开合状态

                    chartData.splice(index, 0, ...childData)
                    let cp = Object.assign({}, label[index])
                    label.splice(index, 1, {
                        ...cp,
                        value: '▼' + cp['value'].slice(1)
                    })

                    label.splice(index, 0, ...childData.map(item => {
                        return {
                            value: item['name'],
                            textStyle: {
                                color: color[item['id'].split('-').length - 1]
                            }
                        }
                    }))

                }
            } else {
                let childrenLength = findLength(params.data.children)
                close[chartData[index].id] = true
                let cp = Object.assign({}, label[index])
                label.splice(index, 1, {
                    ...cp,
                    value: '▶' + cp['value'].slice(1)
                })
                chartData.splice(index - childrenLength, childrenLength)
                label.splice(index - childrenLength, childrenLength)
            }
            refresh()

        }
    })
    refresh()
</script>

</html>
  • 效果图：
    在这里插入图片描述
aLinxi
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
漏刻有时数据可视化Echarts组件开发(5):二级饼图分类展示收入支出ROI
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
02-18 1311
引入 echarts.js <!-- 引入 echarts.js --> <script src="https://cdn.jsdelivr.net/npm/echarts@5.0.2/dist/echarts.min.js"></script> 创建DOM容器 <div id="main"></div> 数据格式 var income = [ {name: '工资性收入', value: 19785}.
Echarts 图表点击x轴y轴切换图表二级数据
老司机的后备箱
05-25 700
学习过程中将笔记整理跟大家分享，希望对大家也有所帮助，共同成长进步💪~ 如果大家喜欢，可以点赞或留言💕~~~~，谢谢大家⭐️⭐️⭐️~~~ 效果图 代码部分 methods: { mychart1(data) { this.myChart = echarts.init(document.getElementById('profitTotal')); let echartData = []; if(data) { echa.
Echarts柱状图 （带下钻动画查询二级数据）
qq_48765361的博客
04-11 524
【代码】Echarts柱状图 （带下钻动画查询二级数据）
前端Vue2+Element-UI电商后台管理 项目总结
weixin_48701221的博客
08-26 8714
使用vue2+elementUI编写的前端项目
echarts双向对比柱状图
weixin_49561225的博客
11-02 2899
option = { tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, title: { text: '各阶段人员分布情况', }, t...
echarts双柱状图用bar
weixin_43926519的博客
09-24 391
实现效果： 学习内容： 提示：这里可以添加要学的内容 例如： 1、 搭建 Java 开发环境 2、 掌握 Java 基本语法 3、 掌握条件语句 4、 掌握循环语句 学习时间： 提示：这里可以添加计划学习的时间 例如： 1、 周一至周五晚上 7 点—晚上9点 2、 周六上午 9 点-上午 11 点 3、 周日下午 3 点-下午 6 点 学习产出： 提示：这里统计学习计划的总量 例如： 1、 技术笔记 2 遍 2、CSDN 技术博客 3 篇 3、 学习的 vlog 视频 1 个 ...
Echarts地图省级联动，动态加载数据，右键返回，并附有省市json地图。
10-29
Echarts是一款基于JavaScript的数据可视化库，它提供了丰富的图表类型，如柱状图、折线图、饼图等，以及强大的地图功能。在这个项目中，我们关注的是Echarts的地图功能，特别是省级联动和动态加载数据的实现，同时...
echars地图 省市二级联动 插件 源码
06-06
ECharts是一款由百度开发的基于JavaScript的数据可视化库，它支持丰富的图表类型，如柱状图、折线图、饼图以及地图等。在本案例中，我们关注的是"echars地图 省市二级联动 插件 源码"，这是一个专门针对中国省市区两...
layui下的登录页首页
04-28
当用户登录成功后，通过Ajax请求获取用户的权限信息，然后根据这些信息动态生成对应的菜单结构，包括一级、二级甚至三级菜单。layui的tree组件非常适合用于展示这种层次结构，它可以以折叠或展开的形式显示菜单。 ...
vue-project.zip
07-21
ECharts是一个使用JavaScript实现的数据可视化库，它支持各种图表类型，如折线图、柱状图、饼图等。在Vue项目中，通常会将ECharts组件化，通过数据驱动来更新图表，实现动态、交互式的数据展示。 结合上述信息，这...
Vue数据可视化大屏_油井物联网监控_vue_
09-30
在这个项目中，开发者可能使用了类似的库来创建各种图表，如折线图、柱状图、饼图，以直观展示油井的实时数据。 4. **Vue CLI**：Vue命令行工具(Vue CLI)是一个强大的脚手架，用于快速搭建项目结构，包含自动化构建...
echarts 柱状图带底部table表格
m0_64972091的博客
02-03 1894
echarts 柱状图带底部table表格
Echarts2 柱状图
qq_30568049的博客
11-08 332
实现Echarts横向柱形图表的封装.
echart(2)——柱状图
qq_46285250的博客
07-07 684
案例 pictorialBar 象形柱状图 修改并注释的代码 源码地址：https://www.makeapie.com/editor.html?c=xMQLI9VAFHa option = { backgroundColor: '#031245', textStyle: { color: '#c0c3cd', fontSize: 14, }, toolbox: { //工具箱 show: true,
2.Echarts柱状图最详解析及示例
热门推荐
笨小孩
12-21 1万+
前言：柱状图主要分横着的柱状图和竖着的柱状图，以及和其他类型图混搭图形。本文主要说明前两种类型，并未涵盖所有属性，主要是经常用到的属性。 准备工作 到echarts3（注意是echarts3，不是echarts2）官方下载echarts或者自定义下载，下载地址：http://echarts.baidu.com/download.html 示例及说明 代码中未说明的配置项，
echarts二级页面展示响应式 和 resize事件报错
2301_76607997的博客
02-27 176
echarts图表实现自适应 和 resize事件报错 Cannot read properties of null (reading 'getAttribute')
js实现右键弹出自定义的菜单
HaiRong_21的博客
09-09 2457
js实现右键弹出自定义的菜单 实现的步骤：1、首先阻止右键弹出系统默认的菜单 2、自定义菜单并隐藏 3、点击右键弹出自定义菜单 4、点击桌面除菜单任意位置，菜单隐藏，点击菜单，菜单不隐藏。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sca
2024 TI杯电子工程设计大赛工程资料
最新发布
07-24
移植的驱动：TFTLCD屏幕、触控IC、AD9910（DDS）、SI5351（时钟发生芯片） 所有驱动的通信部分被优化和重写（不超频的情况下），实现外设最佳性能表现 开发的算法 优化算法（gd.h）：实现二阶余弦退火梯度下降法 FFT相关（fft.h）：高精度FFT采样分析（与SI5351配合实现） 软件解调AM和FM信号 通信相关（fpga_spi.h）：实现与FPGA的私有协议（类SPI）通信 波形生成（fmam_gen.h）：实现DDS产生FM、AM调制波形 实现DAC产生FM、AM调制波形 方波周期测量（app.c）
echarts柱状图颜色柱状图
10-17
您好，关于echarts柱状图的颜色设置，可以通过以下方式进行设置： 在option中的series中设置itemStyle属性，其中normal表示正常状态下的样式，emphasis表示高亮状态下的样式。具体代码如下： ``` option = { ... series: [{ type: 'bar', data: [10, 20, 30, 40, 50], itemStyle: { normal: { color: '#FFA07A' // 柱状图颜色 }, emphasis: { color: '#FF4500' // 高亮颜色 } } }] ... }; ``` 您可以根据需要自定义颜色值，也可以使用预设的颜色值，例如： ``` color: ['#c23531','#2f4554','#61a0a8','#d48265','#91c7ae','#749f83','#ca8622','#bda29a','#6e7074','#546570','#c4ccd3'] ``` 这是echarts官方提供的默认颜色值，您可以根据需要选择使用。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值