项目中需要绘制饼图,因此简单学习了下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. 吴裕雄--天生自然C语言开发:文件读写

    #include <stdio.h> int main() { FILE *fp = NULL; fp = fopen("/tmp/test.txt", "w ...

  2. python之os和sys模块的区别

    一.os模块 os模块是Python标准库中提供的与操作系统交互的模块,提供了访问操作系统底层的接口,里面有很多操作系统的函数 1.os常用方法 import os # print(os.getcwd ...

  3. Mysql Sql 语句练习题 (50道)

    MySql 语句练习50题 表名和字段 –1.学生表 Student(s_id,s_name,s_birth,s_sex) –学生编号,学生姓名, 出生年月,学生性别 –2.课程表 Course(c_ ...

  4. CentOS-SendMail服务

    title date tags layout music-id CentOS6.5 SendMail服务安装与配置 2018-09-04 Centos6.5服务器搭建 post 456272749 一 ...

  5. [LC] 203. Remove Linked List Elements

    Remove all elements from a linked list of integers that have value val. Example: Input: 1->2-> ...

  6. 3)ARP到底属于网络层还是链路层

     说白了  就是有些协议起到了承上启下的作用  比较模糊   很难给出一个精确的定位

  7. 2019ICPC南京网络赛B super_log(a的b塔次方)

    https://nanti.jisuanke.com/t/41299 分析:题目给出a,b,mod求满足条件的最小a,由题目的式子得,每次只要能递归下去,b就会+1,所以就可以认为b其实是次数,什么的 ...

  8. 学习python-20191203-Python Flask高级编程开发鱼书_第02章 Flask的基本原理与核心知识

    视频01: 做一个产品时,一定要对自己的产品有一个明确的定位.并可以用一句话来概括自己产品的核心价值或功能. 鱼书网站几个功能 1.选择要赠送的书籍,向他人赠送书籍(价值功能,核心价值的主线): 2. ...

  9. HTML的img标签:alt属性和title属性

    当浏览器卖主扭曲了标准并且自顾自的不按规则去做一些事,他们可能会造成一些问题,或者至少产生了混淆.例子之一就是一些浏览器处理alt属性(一般会被错误的称作alt标签)的方式,比如拥有大量用户的Wind ...

  10. 在CMD中操作mysql数据库出现中文乱码解决方案

    百度了一下..有说将cmd字符编码用chcp命令改为65001(utf8字符编码),可这样之后根本无法输入中文,查询出的中问结果依旧乱码 其实,只要保证cmd客户端和MySQL两者编码一致即可. 但现 ...