项目中需要绘制饼图,因此简单学习了下echarts的基本使用。
head中引入js文件:

  1. <script src="/static/frame/echarts/echarts.min.js"></script>

body中(圆饼图):

  1. ...
  2. <div class="card_style layui-col-md5">
  3. <div class="layui-card">
  4. <div id="pie_echarts" class="layui-card-body" style="width: 100%;height:170%;">
  5. </div>
  6. </div>
  7. </div>
  8. ...

body中(横向柱状图):

  1. ...
    <div class="row">
  2. <div id="main"></div>
  3. </div>
    ...

  

js中:

  1. // 圆饼图
    // 基于准备好的dom,初始化echarts实例
  2. var myChart = echarts.init(document.getElementById('pie_echarts'));
  3. // 指定图表的配置项和数据
  4. option = {
  5. title: {
  6. text: 'bug分布',
  7. x: 'left'
  8. },
  9. tooltip: {
  10. trigger: 'item',
  11. formatter: "{a} <br/>{b} : {c} ({d}%)"
  12. },
  13. color: ['#CD5C5C', '#00CED1', '#9ACD32', '#FFC0CB'],
  14. stillShowZeroSum: false,
  15. series: [
  16. {
  17. name: 'bug分布',
  18. type: 'pie',
  19. radius: '80%',
  20. center: ['60%', '60%'],
  21. data: [
  22. {value: 1, name: '后台_bug'},
  23. {value: 3, name: 'IOS_bug'},
  24. {value: 7, name: 'Android_bug'},
  25. {value: 4, name: 'H5_bug'},
  26. ],
  27. itemStyle: {
  28. emphasis: {
  29. shadowBlur: 10,
  30. shadowOffsetX: 0,
  31. shadowColor: 'rgba(128, 128, 128, 0.5)'
  32. }
  33. }
  34. }
  35. ]
  36. };
  37. // 使用刚指定的配置项和数据显示图表。
  38. myChart.setOption(option);

  

 

  1. // 横向柱状图
  2. var Chart = echarts.init(document.getElementById('main'));
  3. Chart.setOption({
  4. title: {
  5. text: '预测类别及概率',
  6.  
  7. },
  8. tooltip: {
  9. trigger: 'axis',
  10. axisPointer: {
  11. type: 'shadow'
  12. }
  13. },
  14. legend: {},
  15. grid: {
  16. left: '3%',
  17. right: '4%',
  18. bottom: '3%',
  19. containLabel: true
  20. },
  21. xAxis: {
  22. type: 'value',
  23. boundaryGap: [0, 0.01]
  24. },
  25. yAxis: {
  26. type: 'category',
                     // data为横坐标数据
  27. data: [class_name[2], class_name[1], class_name[0]]
  28. },
  29. series: [{
  30. type: 'bar',
  31. itemStyle: {
  32. normal: {
  33.  
  34. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  35. offset: 0,
  36. color: '#fff'
  37. }, {
  38. offset: 1,
  39. color: '#3fa7dc'
  40. }]),
  41.  
  42. }
  43. },
                     // data为纵坐标数据
  44. data: [returned_probability[2], returned_probability[1], returned_probability[0]]
  45. }
  46. ]
  47. });

  

echarts实现饼图及横向柱状图的绘制的更多相关文章

  1. echarts —— 绘制横向柱状图(圆角、无坐标轴)

    UI给了设计图,看了一眼觉得简单,不就是无序列表布局嘛(ul,li),后来才知道那是echarts图,好吧,样式如下: 代码如下:(渐变色没做) <!DOCTYPE html> <h ...

  2. ajax导致Echarts不显示饼图数据、柱状图数据只显示气泡的问题。

    1.ajax导致Echarts不显示饼图数据.柱状图数据只显示气泡的问题. ajax的同步.这个同步的意思是当JS代码加载到当前ajax的时候会把页面里所有的代码停止加载,页面出去假死状态,当这个aj ...

  3. echarts_部分图表配置简介_横向柱状图

    横向柱状图主要配置x位置x轴类型y轴类型(轴的类型分两种 1.category(类别)2.value(值)),代码简单(里面有注释)效果如下: var myChart = echarts.init(d ...

  4. echarts标准饼图(一)——基本配置demo

    echarts标准饼图解读共分为四部分, 一.基本配置demo 二.标题(title)配置 三.提示框(tooltip)配置 四.图例(legend)配置 五.系列列表(series )配置 下面是一 ...

  5. ECharts 环形饼图 动态获取json数据

    ECharts  环形饼图 动态获取json数据 效果图如下: 一.html部分 <div id="secondPieChart" style="width:100 ...

  6. echarts中饼图显示百分比

    通过echarts制作饼图,需要通过鼠标移动到对应的扇形才能才看数值和百分比. 解决这个问题参考的是将鼠标移动到扇形上的显示方法:     tooltip : {         trigger: ' ...

  7. DevExpress 折线图和柱状图的绘制与数据绑定

    DevExpress 组件是一个非常丰富和强大的组件,适合各种可视化图形的绘制与展示,在数据分析展示中是个很有帮助的,网上也有很多关于这方面的文章,关于折线图或柱状图的画法,以下是自己在工作中接触到的 ...

  8. jquery.wordexport.js打印echarts.js画出的柱状图

    jquery.wordexport.js打印echarts.js画出的柱状图. echarts画出的图是不能直接打印出来的(echarts的柱状图是用canvas画出来的),而jquery.worde ...

  9. Python之Matplot——01.堆叠柱状图的绘制

    1.Matplotlib是python的一个绘图库,可以方便的绘制各种图标,是数据可视化的利器. 2.本文我就给大家介绍一下条形图或者说柱状图的绘制 3.代码如下: <1>首先导入模块 1 ...

随机推荐

  1. SGD/BGD/MBGD使用python简单实现

    算法具体可以参照其他的博客: 随机梯度下降: # coding=utf-8 ''' 随机梯度下降 ''' import numpy as np # 构造训练数据 x = np.arange(0., 1 ...

  2. BigDecimal进行精确运算

    public class Test_1 { public static void main(String[] args) { System.out.println(0.06+0.01); System ...

  3. 吴裕雄--天生自然 R语言开发学习:使用键盘、带分隔符的文本文件输入数据

    R可从键盘.文本文件.Microsoft Excel和Access.流行的统计软件.特殊格 式的文件.多种关系型数据库管理系统.专业数据库.网站和在线服务中导入数据. 使用键盘了.有两种常见的方式:用 ...

  4. VisionPro和Halcon的详细对比

    一.概括的对比 1.1  Halcon的优势 Halcon有着更加低廉的Lisence 1.并且提供更好.更强大的2D和3D的视觉软件库 2.Halcon支持的视觉图像采集设备数量是Visionpro ...

  5. 网页title滚动

    );        var leftstar=title.substring (1,title.length );        document.title =leftstar +firstch ; ...

  6. [LC] 225. Implement Stack using Queues

    Implement the following operations of a stack using queues. push(x) -- Push element x onto stack. po ...

  7. t分布|F分布|点估计与区间估计联系|

    应用统计学 推断统计需要样本形容总体,就要有统计量.注意必须总体是正态分布,否则统计量的分布不能得到.卡方分布和t分布只要样本大于30都近似于正态分布. t分布和F分布推导及应用(图): 总体比例是π ...

  8. 吴裕雄--天生自然 R语言开发学习:图形初阶

    # ----------------------------------------------------# # R in Action (2nd ed): Chapter 3 # # Gettin ...

  9. js new 与 return

    前置: 默认情况下, 函数的返回值是 undefined (即没有定义返回值). new 操作符 js 中的 new 操作符,可以是我们像 java 一样,获得一个新的对象,例如: function ...

  10. HTTP 协议的基本知识,包括请求流程、请求方法等

    一.什么是http协议? HTTP是Hyper Text Transfer Protocol(超文本传输协议)的缩写.它的发展是万维网协会(World Wide Web Consortium)和Int ...