js实现折线、柱形、散点、扇形统计图之间的转换

先引入echarts插件

     <script src="./js/echarts.js"></script>

1，先构建一个容器

         <div id="box" style="width: 90%;height:650px;margin-left: 5%;"></div>

<div class="xin"><div id="zhi" onclick="zhixian()">转换为折线统计图</div><div id="zhu" onclick="zhuxing()">转换为柱形统计图</div><div id="qiu" onclick="qiuxing()">转换为散点统计图</div><div id="wcy" onclick="round()">转换为扇形统计图</div><div id="bolang" onclick="bor()">折线统计图2.0版本</div></div>

2，在js中引入假数据或外部接口并通过相应的点击事件赋给统计图type相应属性

let arr = new XMLHttpRequest();arr.open('get', "js/index.json");arr.send();arr.onreadystatechange = function() {if (arr.readyState == 4 && arr.status == 200) {let at = arr.responseText;obj = JSON.parse(at);console.log(obj[0].color);// 折线统计图zhi.onclick = function() {for (let i = 0; i < obj.length; i++) {obj[i].type = "line"}fun(obj)}// 柱形统计图zhu.onclick = function() {for (let i = 0; i < obj.length; i++) {obj[i].type = "bar"}fun(obj)}// 散点统计图qiu.onclick = function() {for (let i = 0; i < obj.length; i++) {obj[i].type = "scatter";}fun(obj)}fun(obj);// 扇形统计图wcy.onclick = function() {let num = [];let add = [];let zo = [];let get;add = [];let zzx = [];for (let i = 0; i < obj.length; i++) {obj[i].type = "pie";let http = 0;for (let a = 0; a < obj[i].data.length; a++) {http += obj[i].data[a].value;num.push(obj[i].name);console.log(http);}zo.push(JSON.parse(http));get = {value:zo[i],name:obj[i].name}zzx.push(get);let jy = {name:"测试总成绩",type:"pie",data:zzx}add.push(jy)}console.log(add);let option = {title: {text: '测试单科总成绩'},tooltip: {trigger: 'item'},xAxis: {show: 0 ,type: 'category',data: there},toolbox: {feature: {restore: {},saveAsImage: {},}},series: add};box.setOption(option);}bol.onclick = function(){let num = [];let there = ["小华", "小张", "小赵", "老魏", "小明"];let add = [];let zo = [];let get;add = [];let zzx = [];for(let i = 0 ; i < obj.length ; i++){obj[i].type = "line";num.push(obj[i].name);get = {name: obj[i].name,type: obj[i].type,stack: 'Total',smooth: true,lineStyle: {width: 0},showSymbol: false,areaStyle: {opacity: 0.6,color: new echarts.graphic.LinearGradient(0, 0, 0, 1, obj[i].color),},emphasis: {focus: 'series',},data: obj[i].data,}add.push(get)console.log(add);}let option = {color: ['#55ff00', '#ff0000', '#ff00ff'],title: {text: '测试成绩'},tooltip: {trigger: 'axis',},legend: {data: num},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},toolbox: {feature: {restore: {},saveAsImage: {},}},xAxis: {show: 1 ,type: 'category',data: there},yAxis: {type: 'value'},series: add};box.setOption(option);}}}function fun(obj) {let get;add = [];for (let i = 0; i < obj.length; i++) {num.push(obj[i].name);get = {name: obj[i].name,type: obj[i].type,data: obj[i].data,}add.push(get);}thank();}function thank() {let option = {color: ['#55ff00', '#ff0000', '#ff00ff'],title: {text: '测试成绩',},tooltip: {trigger: 'axis',},legend: {data: num,},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true,},toolbox: {feature: {restore: {},saveAsImage: {},}},xAxis: {show: 1 ,type: 'category',data: there},yAxis: {type: 'value'},series: add};box.setOption(option);}

注：转扇形统计图时需要重新书写统计函数

js实现折线、柱形、散点、扇形统计图之间的转换相关推荐

使用python 绘制统计图，(折线图，条形统计图，扇形统计图)
在使用python的时候经常会出现各种数据,有的时候光看数字还感觉不出来什么,碰巧发现网上有说怎么绘制出统计图的.此处记录简单的几种,做简单使用 ###折线图和柱状图#### import numpy ...
js 定义一个二/八/十六进制数，进制之间的转换
在javascript中定义二进制需使用0b开头 console.log(0b1001); // 9 console.log(1001); // 1001 在javascript中定义八进制需使用0开 ...
使用wxcharts组件的图表，折现，扇形，柱形
使用wxcharts组件的图表,折现,扇形,柱形 //js代码 var wxCharts = require('../../../utils/wxcharts'); // 引入下载到项目的wxchar ...
（译）stackoverflow上关于柱形全景与立方体全景转换的讨论
2019独角兽企业重金招聘Python工程师标准>>> 提问: @ WestLangley: 我正在给某网站开发一个简单的3D全景浏览功能.考虑到移动端的性能,我使用了three.j ...
计算机电子表格三维簇状柱形图怎么设置,Excel中怎么制作柱形对比图【excel表格数据生成柱形图】...
怎么创建Excel簇状柱形图并设置图表的格第一步:插入---图表----选择"簇状柱形图" 在图表区域右击---选择数据-----点击" "号-----选择系 ...
R语言在直方图条（柱形）上添加计数（count）或者百分比（percent）标签
R语言在直方图条(柱形)上添加计数(count)或者百分比(percent)标签目录
用python绘制柱状图标题-使用Python绘制柱形竞赛图
我们经常看到的Bar Chart Race(柱形竞赛图),可以看到数据的呈现非常的直观.今天就一起来学习下如何生成和上面一样的柱形竞赛图. 1.导入Python库 Python 1 2 3 4 5im ...
python 分布图_python数据分布型图表柱形分布图系列带误差线的柱形图
柱形分布图系列柱形分布图系列使用柱形图的方式展示数据的分布规律: 可以借助误差线或散点图: 带误差线的柱形图就是使用每个类别的均值作为柱形的高度: 再根据每个类别的标准差绘制误差线: 缺点:无法显 ...
glide加载gif图不显示动画_用Python绘制会动的柱形竞赛图
我们经常看到的Bar Chart Race(柱形竞赛图),可以看到数据的呈现非常的直观.今天就一起来学习下如何生成和上面一样的柱形竞赛图. 1.导入Python库 2.加载数据集这里使用的是城市人口 ...

js实现折线、柱形、散点、扇形统计图之间的转换

js实现折线、柱形、散点、扇形统计图之间的转换相关推荐

最新文章

热门文章