echarts实现饼图及横向柱状图的绘制
项目中需要绘制饼图,因此简单学习了下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实现饼图及横向柱状图的绘制的更多相关文章
- echarts —— 绘制横向柱状图(圆角、无坐标轴)
UI给了设计图,看了一眼觉得简单,不就是无序列表布局嘛(ul,li),后来才知道那是echarts图,好吧,样式如下: 代码如下:(渐变色没做) <!DOCTYPE html> <h ...
- ajax导致Echarts不显示饼图数据、柱状图数据只显示气泡的问题。
1.ajax导致Echarts不显示饼图数据.柱状图数据只显示气泡的问题. ajax的同步.这个同步的意思是当JS代码加载到当前ajax的时候会把页面里所有的代码停止加载,页面出去假死状态,当这个aj ...
- echarts_部分图表配置简介_横向柱状图
横向柱状图主要配置x位置x轴类型y轴类型(轴的类型分两种 1.category(类别)2.value(值)),代码简单(里面有注释)效果如下: var myChart = echarts.init(d ...
- echarts标准饼图(一)——基本配置demo
echarts标准饼图解读共分为四部分, 一.基本配置demo 二.标题(title)配置 三.提示框(tooltip)配置 四.图例(legend)配置 五.系列列表(series )配置 下面是一 ...
- ECharts 环形饼图 动态获取json数据
ECharts 环形饼图 动态获取json数据 效果图如下: 一.html部分 <div id="secondPieChart" style="width:100 ...
- echarts中饼图显示百分比
通过echarts制作饼图,需要通过鼠标移动到对应的扇形才能才看数值和百分比. 解决这个问题参考的是将鼠标移动到扇形上的显示方法: tooltip : { trigger: ' ...
- DevExpress 折线图和柱状图的绘制与数据绑定
DevExpress 组件是一个非常丰富和强大的组件,适合各种可视化图形的绘制与展示,在数据分析展示中是个很有帮助的,网上也有很多关于这方面的文章,关于折线图或柱状图的画法,以下是自己在工作中接触到的 ...
- jquery.wordexport.js打印echarts.js画出的柱状图
jquery.wordexport.js打印echarts.js画出的柱状图. echarts画出的图是不能直接打印出来的(echarts的柱状图是用canvas画出来的),而jquery.worde ...
- Python之Matplot——01.堆叠柱状图的绘制
1.Matplotlib是python的一个绘图库,可以方便的绘制各种图标,是数据可视化的利器. 2.本文我就给大家介绍一下条形图或者说柱状图的绘制 3.代码如下: <1>首先导入模块 1 ...
随机推荐
- SGD/BGD/MBGD使用python简单实现
算法具体可以参照其他的博客: 随机梯度下降: # coding=utf-8 ''' 随机梯度下降 ''' import numpy as np # 构造训练数据 x = np.arange(0., 1 ...
- BigDecimal进行精确运算
public class Test_1 { public static void main(String[] args) { System.out.println(0.06+0.01); System ...
- 吴裕雄--天生自然 R语言开发学习:使用键盘、带分隔符的文本文件输入数据
R可从键盘.文本文件.Microsoft Excel和Access.流行的统计软件.特殊格 式的文件.多种关系型数据库管理系统.专业数据库.网站和在线服务中导入数据. 使用键盘了.有两种常见的方式:用 ...
- VisionPro和Halcon的详细对比
一.概括的对比 1.1 Halcon的优势 Halcon有着更加低廉的Lisence 1.并且提供更好.更强大的2D和3D的视觉软件库 2.Halcon支持的视觉图像采集设备数量是Visionpro ...
- 网页title滚动
); var leftstar=title.substring (1,title.length ); document.title =leftstar +firstch ; ...
- [LC] 225. Implement Stack using Queues
Implement the following operations of a stack using queues. push(x) -- Push element x onto stack. po ...
- t分布|F分布|点估计与区间估计联系|
应用统计学 推断统计需要样本形容总体,就要有统计量.注意必须总体是正态分布,否则统计量的分布不能得到.卡方分布和t分布只要样本大于30都近似于正态分布. t分布和F分布推导及应用(图): 总体比例是π ...
- 吴裕雄--天生自然 R语言开发学习:图形初阶
# ----------------------------------------------------# # R in Action (2nd ed): Chapter 3 # # Gettin ...
- js new 与 return
前置: 默认情况下, 函数的返回值是 undefined (即没有定义返回值). new 操作符 js 中的 new 操作符,可以是我们像 java 一样,获得一个新的对象,例如: function ...
- HTTP 协议的基本知识,包括请求流程、请求方法等
一.什么是http协议? HTTP是Hyper Text Transfer Protocol(超文本传输协议)的缩写.它的发展是万维网协会(World Wide Web Consortium)和Int ...