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

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

body中(圆饼图):

...
<div class="card_style layui-col-md5">
<div class="layui-card">
<div id="pie_echarts" class="layui-card-body" style="width: 100%;height:170%;">
</div>
</div>
</div>
...

body中(横向柱状图):

...
<div class="row">
<div id="main"></div>
</div>
...

  

js中:

// 圆饼图 
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('pie_echarts'));
// 指定图表的配置项和数据
option = {
title: {
text: 'bug分布',
x: 'left'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
color: ['#CD5C5C', '#00CED1', '#9ACD32', '#FFC0CB'],
stillShowZeroSum: false,
series: [
{
name: 'bug分布',
type: 'pie',
radius: '80%',
center: ['60%', '60%'],
data: [
{value: 1, name: '后台_bug'},
{value: 3, name: 'IOS_bug'},
{value: 7, name: 'Android_bug'},
{value: 4, name: 'H5_bug'},
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(128, 128, 128, 0.5)'
}
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

  

 

// 横向柱状图
var Chart = echarts.init(document.getElementById('main'));
Chart.setOption({
title: {
text: '预测类别及概率', },
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01]
},
yAxis: {
type: 'category',
                 // data为横坐标数据
data: [class_name[2], class_name[1], class_name[0]]
},
series: [{
type: 'bar',
itemStyle: {
normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#fff'
}, {
offset: 1,
color: '#3fa7dc'
}]), }
},
                 // data为纵坐标数据
data: [returned_probability[2], returned_probability[1], returned_probability[0]]
}
]
});

  

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. django框架进阶-CSRF认证

    ############################################### """ django中csrf的实现机制 #第一步:django第一次响应 ...

  2. 隐马尔可夫随机场HMM

    概率知识点: 0=<P(A)<=1 P(True)=1;P(False)=0 P(A)+P(B)-P(A and B) = P(A or B) P(A|B)=P(A,B)/P(B) =&g ...

  3. AI动作捕捉技术,会让制造业大幅度降低成本吗?

    现代动作捕捉系统应该是起源于100多年前的动画工业,通过一种叫做"动态遮罩或影像描摹"的技术,动画师们可以获得流畅的.栩栩如生的动作:后来到了20世纪80年代,动画师们设计出带有活 ...

  4. 02-信贷路由项目rose框架拆分dubbo

    项目架构和 rose 框架搭建见  https://www.cnblogs.com/yuanpeng-java/p/9835984.html 1.dubbo 框架架构及组成 2.注册中心安装及配置 h ...

  5. springboot+mybatis登录注册

    接上上一篇博客的继续往下做,上一篇已经实现了mybatis自动生成代码,和连接数据库测试部分 本篇我们添加一些功能,实现登录注册,时间原因,前端实现的很粗糙,以后有时间再改吧 首先看一下数据库的构成, ...

  6. 浏览器加载、渲染html的顺序和页面优化

    浏览器加载和渲染html的顺序 1. IE下载的顺序是从上到下,渲染(就是把请求的内容显示到浏览器屏幕上)的顺序也是从上到下,下载和渲染是同时进行的. 2. 在渲染到页面的某一部分时,其上面的所有部分 ...

  7. python学习笔记(11)文件操作

    一.读文件 读写文件是最常见的IO操作.Python内置了读写文件的函数,用法和C是兼容的. 读写文件前,我们先必须了解一下,在磁盘上读写文件的功能都是由操作系统提供的,现代操作系统不允许普通的程序直 ...

  8. HTTP协议八种请求类型介绍

    HTTP 协议中共定义了八种方法或者叫“动作”来表明对 Request-URI 指定的资源的不同操作方式,具体介绍如下: OPTIONS:返回服务器针对特定资源所支持的HTTP请求方法.也可以利用向W ...

  9. [SDOI2006] 线性方程组

    洛谷 P2455 传送门 刚开始写了个消成上三角的,结果狂wa. 后来经过研究发现,消成上三角那种不能直接判断无解或无穷多解,需要其它的操作. 所以干脆学了个消成对角线的,写了一发A了. 其实两种消元 ...

  10. winform窗体中webbrowser如何屏蔽脚本错误弹窗

    在构造函数中加入: webBrowser.ScriptErrorsSuppressed = true;