文档章节

EChars 饼状图

m
 moon888
发布于 12/03 18:56
字数 833
阅读 7
收藏 0

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

官方:https://www.echartsjs.com/zh/index.html

1、引入js 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
</body>
</html>

2、设值

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

// 先加载默认值
var option = {
    title   : {...},
    tooltip : {...},
    legend  : {...},
    series  : [{...}]
};

myChart.setOption(option);


function searchEchars() {
    var params = {};
    $.each($("#form-api-echars-index").serializeArray(), function(i, field) {
        params[field.name] = field.value;
    });

    $.ajax({
        url  : monitor_echars_data_uri,
        data : params,
        cache : false,
        async : true,
        type  : "POST",
        dataType : 'json',
        success : function (result) {
          setOption(result);
        }
    });
}

// 获取数据后可以重新加载数据
function setOption(result) {
    // 填入数据
    myChart.setOption({
      title: {
          text: '接口响应时间分布图'
      },
      series: [{
          data : result.rows
      }]
    });
}

 3、title标题设置

title: {
  text: '学生生源地来源分布图',
  subtext: '模拟数据',
  // x 设置水平安放位置,默认左对齐,可选值:'center' ¦ 'left' ¦ 'right' ¦ {number}(x坐标,单位px)
  x: 'center',
  // y 设置垂直安放位置,默认全图顶端,可选值:'top' ¦ 'bottom' ¦ 'center' ¦ {number}(y坐标,单位px)
  y: 'top',
  // itemGap设置主副标题纵向间隔,单位px,默认为10,
  itemGap: 30,
  backgroundColor: '#EEE',
  // 主标题文本样式设置
  textStyle: {
    fontSize: 26,
    fontWeight: 'bolder',
    color: '#000080'
  },
  // 副标题文本样式设置
  subtextStyle: {
    fontSize: 18,
    color: '#8B2323'
  }
}

4、legend图例设置

legend: {
    // orient 设置布局方式,默认水平布局,可选值:'horizontal'(水平) ¦ 'vertical'(垂直)
    orient: 'vertical',
    // x 设置水平安放位置,默认全图居中,可选值:'center' ¦ 'left' ¦ 'right' ¦ {number}(x坐标,单位px)
    x: 'left',
    // y 设置垂直安放位置,默认全图顶端,可选值:'top' ¦ 'bottom' ¦ 'center' ¦ {number}(y坐标,单位px)
    y: 'center',
    itemWidth: 24,   // 设置图例图形的宽
    itemHeight: 18,  // 设置图例图形的高
    textStyle: {
      color: '#666'  // 图例文字颜色
    },
    // itemGap设置各个item之间的间隔,单位px,默认为10,横向布局时为水平间隔,纵向布局时为纵向间隔
    itemGap: 30,
    backgroundColor: '#eee',  // 设置整个图例区域背景颜色
    data: ['北京','上海','广州','深圳','郑州']
}

5、series值域设置

series: [{
  name: '生源地',
  type: 'pie',
  // radius: '50%',  // 设置饼状图大小,100%时,最大直径=整个图形的min(宽,高)
  radius: ['30%', '60%'],  // 设置环形饼状图, 第一个百分数设置内圈大小,第二个百分数设置外圈大小
  center: ['50%', '50%'],  // 设置饼状图位置,第一个百分数调水平位置,第二个百分数调垂直位置
  data: [
      {value:335, name:'北京'},
      {value:310, name:'上海'},
      {value:234, name:'广州'},
      {value:135, name:'深圳'},
      {value:148, name:'郑州'}
  ],
  // itemStyle 设置饼状图扇形区域样式
  itemStyle: {
    // emphasis:英文意思是 强调;着重;(轮廓、图形等的)鲜明;突出,重读
    // emphasis:设置鼠标放到哪一块扇形上面的时候,扇形样式、阴影
    emphasis: {
      shadowBlur: 10,
      shadowOffsetX: 0,
      shadowColor: 'rgba(30, 144, 255,0.5)'
    }
  },
  // 设置值域的那指向线
  labelLine: {
    normal: {
      show: false   // show设置线是否显示,默认为true,可选值:true ¦ false
    }
  },
  // 设置值域的标签
  label: {
    normal: {
      position: 'inner',  // 设置标签位置,默认在饼状图外 可选值:'outer' ¦ 'inner(饼状图上)'
      // formatter: '{a} {b} : {c}个 ({d}%)'   设置标签显示内容 ,默认显示{b}
      // {a}指series.name  {b}指series.data的name
      // {c}指series.data的value  {d}%指这一部分占总数的百分比
      formatter: '{c}'
    }
  }
}]

6、tooltip鼠标悬停提示

tooltip: {
    trigger: 'item',
    formatter: "{b} : {c} <br/>比例 : {d}%"
}

7、结果

© 著作权归作者所有

m
粉丝 10
博文 110
码字总数 44550
作品 0
程序员
私信 提问
父页面div变化 子页面echars跟随变化

echars父页面中div点击放大缩小,子页面load到这个div中 子页面的中echars图怎么跟随父页面的div大小变化

扬之水
2018/09/17
155
1
echars横坐标时间类型

echars横坐标设置时间类型,想把同一坐标轴的值统计起来,然后后面的时间不要重复。主要是希望echars是否有自动结合同类型的数值,没有求大牛帮忙,万分感激

冰V封
2015/12/24
451
0
echars 如何实现三级下钻

@Kener-林峰 你好,想跟你请教个问题: echars 如何实现三级下钻 可以给出一个具体的参考例子不?

luxiangping
2015/05/10
916
1
横向柱状图拖拽出来后(变成圆圈),如何设置其标题?

Echars 问题求解

超轶绝尘
2015/12/03
212
0
echarts 只显示中国地图某一个省份

如题,echars 根据不同省份json 进行切换,但是并不显示整个中国地图?方便请告知,谢谢!

Mr_XK
2016/07/06
11.4K
1

没有更多内容

加载失败,请刷新页面

加载更多

交换机switch 的shutdown 与 no shutdown

shutdown是关闭接口(端口),接口状态会变为DOWN,no shutdown是激活接口(端口),状态变为UP,一般在给vlan或者端口配置管理ip或者端口ip后使用。 有时候我们配置某个端口前会需要把端口关闭到...

刘日辉
35分钟前
5
0
AOP底层源码分析

思维导图 AOP AOP: 面向切面编程[底层就是动态代理] 指程序在运行期间动态的将某段代码切入到指定方法位置进行运行的编程方式。 AOP通知方式 前置通知: logStart(),在目标方法(div)运行之前运...

volc1612
48分钟前
5
0
OSChina 周六乱弹 —— 别听他们的,你不胖你只是毛茸茸的

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @且无需多言 :分享Rise Against的单曲《Audience Of One (Ghost Note Symphonies)》: 硬核朋克不插电版本,隐藏在喧嚣下的柔情! 《Audienc...

小小编辑
今天
34
2
apache httpClient实现代理发送Post请求

CredentialsProvider credsProvider = new BasicCredentialsProvider(); credsProvider.setCredentials( new AuthScope("host", port), new UsernamePasswordCredentials(username, password......

huangkejie
今天
6
0
SpringCloud

单体应用存在的问题 ● 随着业务的发展,开发变得越来越复杂。 ● 修改、新增某个功能,需要对整个系统进行测试,重新部署。 ● 一个模块出现问题,很可能导致整个系统崩溃。 ● 多个开发团队...

Star永恒
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部