echarts如何画柱状图，以及参数解释

最新推荐文章于 2024-06-02 12:02:03 发布

qq_42566295

最新推荐文章于 2024-06-02 12:02:03 发布

阅读量1.8k

点赞数 1

分类专栏：日常总结--javascript

本文链接：https://blog.csdn.net/qq_42566295/article/details/81128112

版权

日常总结--javascript 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery1.3.2.min.js"></script>
    <script src="echarts.js"></script>
</head>
<body>
<div id="product1" style="width: 20%;height: 300px;"></div><!--柱状图容器-->
<script>
    $(function(){
        var datalist = [];
        $.ajax({
            type:'GET',
            url:'test.json',
            dataType:'json',
            success:function(res){
                datalist = res;
                //产品的名称、数量、单价分别提取出来作为三个新数组
                var namelist = [];
                var countlist = [];
                var pricelist = [];
                $.each(datalist,function(index,val){
                    namelist.push(val.name);
                    countlist.push(val.counts);
                    pricelist.push(val.price);
                });
                //以上都是在获取绘制图形所需要的数据

                /*
                 * 柱状图
                 */

                // 基于准备好的dom，初始化echarts实例
                var productChart1 = echarts.init(document.getElementById('product1'));

                // 指定图表的配置项和数据
                var option1 = {
                    title: {
                        text: 'product -- 柱状图',
                        x:'left',
                        y:'top',
                        textStyle:{fontSize:14}
                    },
                    tooltip: {},
                    legend: {            //顶部提示分类、对应颜色及提示位置
                        data:['数量','单价'],
                        x: 'right', // 'center' | 'left' | {number}
                        y: 'top', // 'center' | 'bottom' | {number
                    },
                    xAxis: {
                        data: namelist
                    },
                    yAxis: {},
                    color:['#cfc','#fcc'],
                    series: [
                        {
                            name: '数量',
                            type: 'bar',
                            label: {      //每个柱子顶端显示数值
                                normal: {
                                    show: true,
                                    position: 'top'
                                }
                            },
                            data: countlist
                        },
                        {
                            name: '单价',
                            type: 'bar',
                            label: {      //每个柱子顶端显示数值
                                normal: {
                                    show: true,
                                    position: 'top'
                                }
                            },
                            data: pricelist
                        }
                    ],

                };
                // 使用刚指定的配置项和数据显示图表。
                productChart1.setOption(option1);
                window.onresize = function () {
                    productChart1.resize(); //使图表适应
                };
            }
        });
    })
</script>
</body>
</html>

json文件：

[{
  "name": "apple",
  "counts": "12",
  "price": "10"
},
  {
    "name": "banana",
    "counts": "20",
    "price": "20"
  },
  {
    "name": "age",
    "counts": "69",
    "price": "17"
  },
  {
    "name": "pencil",
    "counts": "100",
    "price": "6"
  },
  {
    "name": "rice",
    "counts": "52",
    "price": "8"
  }
]

绘制结果：

如果对哪个参数的解释不是很理解，那就自己试着去修改一下这个参数，然后就get了

qq_42566295

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
echarts如何画柱状图，以及参数解释

&lt;!doctype html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, user-scalable=no, initial
复制链接

扫一扫