echarts条形图

最新推荐文章于 2024-08-30 16:24:48 发布

垂柳A个人笔记

最新推荐文章于 2024-08-30 16:24:48 发布

阅读量327

点赞数

分类专栏： js+jq

本文链接：https://blog.csdn.net/SNC8F/article/details/103400164

版权

js+jq 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html style="height: 100%">
   <head>
       <meta charset="utf-8">
   </head>
   <body style="height: 100%; margin: 0">
       <div id="container" style="height: 100%"></div>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
       <!-- <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=xfhhaTThl11qYVrqLZii6w8qE5ggnhrY&__ec_v__=20190126"></script> -->
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
       <script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
var option = {
    dataset: {
        source: [
            [ 'amount', 'product'],
            [ 58212, 'Matcha Latte'],
            [ 78254, 'Milk Tea'],
            [ 41032, 'Cheese Cocoa'],
           
        ]
    },
    grid: {containLabel: true},
    xAxis: {name: '', axisTick: {
            show: false
        }, axisLine: {
            show: false,
          
        },},
    yAxis: {type: 'category', axisTick: {
            show: false
        }, axisLine: {
            show: true,
            lineStyle: {
                color: '#dadada'
            }
        },axisLabel: {
			textStyle:{
				color:'#000',  //坐标的字体颜色
			},
		},},

   
    series: [
        {
            type: 'bar',
			//barWidth : 30,
            encode: {
                // Map the "amount" column to X axis.
                x: 'amount',
                // Map the "product" column to Y axis
                y: 'product'
            },
			 itemStyle: {   
                //通常情况下：
                normal:{  
　　　　　　　　　　　　//每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                    color: function (params){
                        var colorList = ['#f00','#0f0','#00f','rgb(195,229,235)'];
                        return colorList[params.dataIndex];
                    },
					 label: {
                           show: true,		//开启显示
                           position: 'right',	//在上方显示
                           textStyle: {	    //数值样式
                               color: 'black',
                               fontSize: 16
                           }
                       }

                },
				}
        }
    ]
};
;
if (option && typeof option === "object") {
    myChart.setOption(option, true);
}
       </script>
   </body>
</html>