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]]}]});

转载于:https://www.cnblogs.com/aidenzdly/p/11189058.html

echarts实现饼图及横向柱状图的绘制相关推荐

python横向柱状图-python绘制横向水平柱状条形图Bar
python绘制横向水平柱状条形图Bar import matplotlib import random import matplotlib.pyplot as plt # 中文乱码和坐标轴负号处理. ...
echarts折线图和双层柱状图结合绘制
效果: 代码: option = {color:["#7179CB","#4CCEFE"],title: {text:"统计总量",text ...
Matlab论文插图绘制模板第77期—对数刻度横向柱状图
在之前的文章中,分享了Matlab对数刻度柱状图的绘制模板: 进一步,再来看一下对数刻度横向柱状图的绘制模板. 先来看一下成品效果: 特别提示:Matlab论文插图绘制模板系列,旨在降低大家使用Mat ...
echarts——横向柱状图
功能描述全屏横向柱状图从小到大排序,每次显示5条,每3秒切换循环显示鼠标移入停止切换,鼠标移出继续切换柱状图组件源码 <template><div class="w ...
python绘制横向柱状图妈妈再也不用担心我不会画图了
python绘制横向柱状图妈妈再也不用担心我不会画图了前言实现代码成果前言事情要从一次画图开始说起当我开开心心搞到一堆数据,以为能够休息的时候,这时候我突然想起来,是不是绘制成柱状图更直 ...
echarts（横向柱状图和grid）
场景最近在做知识图谱的时候,右侧弹窗需要有数据统计功能,大概UI如下图,当时想到的是横向柱状图来实现,目前的效果与UI的不同是后面统计的数量显示的位置.后来经其他前端同事启发,他是用进度条来实现的, ...
【Echarts】中国地图、堆叠图、横向柱状图
封装一个监听窗口变化,自适应图像大小的混入对象: 混入对象:一个混入对象可以包含任意组件选项.当组件使用混入对象时,所有混入对象的选项将被"混合"进入该组件本身的选项. chart ...
[Echarts可视化] 一.入门篇之简单绘制中国地图和贵州地区
最近发生了很多事情,去到了一个新环境学习.但是不论在哪里,我都需要不忘初心,坚持做自己喜欢的事情,在CSDN写博客.教学.爱娜.生活等等. 这篇文章主要是通过Echarts可视化介绍入 ...
用Java制作左右横向柱状图_横向柱状图
Echarts绘制横向柱状图(圆角+渐变) var myChart = echarts.init(document.getElementById('main'));//初始化数据 var catego ...

echarts实现饼图及横向柱状图的绘制

echarts实现饼图及横向柱状图的绘制相关推荐

最新文章

热门文章