echarts生成饼状图、柱状图、多项柱状图的参数介绍

最新推荐文章于 2024-05-17 01:43:22 发布

nb7474

最新推荐文章于 2024-05-17 01:43:22 发布

阅读量2.4k

点赞数

分类专栏：前端学习 echarts3-0 json解析文章标签： echarts3-0

本文链接：https://blog.csdn.net/nb7474/article/details/79580380

版权

本文介绍了使用Echarts3-0生成饼图、柱状图和多项柱状图的参数和方法。对于饼图，重点在于处理数据并将其转化为Echarts所需的name和value格式。柱状图的难点在于动态获取x轴和y轴数据，可以通过for循环遍历后台传来的数据。多项柱状图中，探讨了formatter属性在tooltip中的应用，以及如何在地图图表中设置数据格式。

摘要由CSDN通过智能技术生成

1.饼图

这里写图片描述

html代码：

<div id="SexDistri" style="width: 100%;height: 50%;"></div>

下面的柱状图的html代码也与此类似。

js代码：

var SexDistribution =  ${SexDistribution};
    //console.log(SexDistribution);
    var res =[];
    var totalcount=0;
    for(var i=0;i<SexDistribution.length;i++){
        //设置饼图的时候可直接定义一个新的数组，将值分别存放到name和value中 这样可以直接使用这个新数组给饼图赋值
        var obj ={name:SexDistribution[i].sex,value:SexDistribution[i].number};
        res.push(obj);
        totalcount+=SexDistribution[i].number;  //得到饼图各个部分的总数
    }

    var myChart1 =echarts.init(document.getElementById('SexDistri'));  //加载echarts参数的另一种方式
    myChart1.setOption({
        title : {
            text: '性别分布图',
            x:'right',
            textStyle: {
                color: '#000000',
                fontSize:18
            }
        },

        //图例组件
        legend: {
            data:['男','女'], //图例的数据数组。数组项通常为一个字符串，每一项代表一个系列的 name
            y: 'bottom',  //图例的y位置  此处为底部
            textStyle: {
                fontSize: 14,
                fontWeight: 'bolder',
                color: '#000000'          // 主标题文字颜色
            }
        },
        tooltip : {
            trigger: 'item',
            formatter: "{b}用户：{c0}</br>总人数："+totalcount+" </br>百分比：{d}%" //提示框浮层内容格式器，支持字符串模板和回调函数两种形式
        },
        color:['#4f81bd','#c0504d'], 
        series : [
                  {
                      type: 'pie',  //饼图

                      center: ['50%', '50%'], //饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。
                      data:res,
                      textStyle:{
                          fontSize:20
                      },
                      itemStyle: {  //图形样式
                          emphasis: {
                              shadowBlur: 10,  //图形阴影的模糊大小。该属性配合 shadowColor,
                                                //shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
                              shadowOffsetX: 0,     //阴影水平方向上的偏移距离。
                              shadowColor: 'rgba(0, 0, 0, 0.5)'  //阴影颜色
                          }
                      }
                  }
              ]  
    });</