- 时间:2021-03-01 20:10 编辑:林势俊 来源:蚂蚁 阅读:187
- 扫一扫,手机访问
摘要:大家好,今天给大家讲解的是subtext(文本编辑器sublime)的相关内容,共分为以下几步介绍怎么在MVC中使用Echarts饼图,感兴趣的朋友可以跟着学习一下。
怎么在MVC中使用Echarts饼图
1.第一步:实现思路。1、首先整合前端的依赖实现静态页面的展示。2、借助于jquery的ajax异步请求后台的数据返回json替换2.第二步:代码实现。具体实现如下所示<!DOCTYPE html><html><head><meta charset="UTF-8"><title>借助于jquery的组件实现饼图</title><script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> <script type="text/javascript" src="js/echarts.common.min.js"></script></head><body><!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="myChartArea" style="width: 600px; height:400px;"></div><!-- 注意:操作echarts的js引用,必须放在div之后 --><script type="text/javascript">$(function () {var myChart = echarts.init($("#myChartArea")[0]);var option = { title: { text: '百度用户访问来源', subtext: '纯属虚构', x: 'center' }, tooltip: { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { orient: 'vertical', left: 'left', data: ['百度知道', '百度经验', '百度百科', '百度论坛', '百度搜索'] }, series: [ { name: '访问来源', type: 'pie', radius: '55%', center: ['50%', '60%'], data: [ {value: 335, name: '百度知道'}, {value: 310, name: '百度经验'}, {value: 234, name: '百度百科'}, {value: 135, name: '百度论坛'}, {value: 1548, name: '百度搜索'} ], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ]}; // 为echarts对象加载数据 myChart.setOption(option);});</script></body></html>


3.第三步:测试。1、打开前端页面2、确认展示页面结果展示成功。

4.第四步:依赖js下载。1、jquery下载下载jquery具体操作方法,再百度搜索引擎中输入“jquery下载”--》点击搜索按钮--》得到查询结果进入下载界面--》下载具体操作如图所示:2、echarts.js下载:http://echarts.baidu.com/download.html,下载“常用”js即可




5.第五步:ajax请求后台数据展示。1、第一步实现ajax请求后台数据,如果是json字符串需要转换:1.1 $.parseJSON( jsonstr ); //jQuery.parseJSON(jsonstr),可以将json字符串转换成json对象1.2JSON.parse(jsonstr); //可以将json字符串转换成json对象1.3eval('(' + jsonstr + ')'); //可以将json字符串转换成json对象,注意需要在json字符外包裹一对小括号2、编写后台处理代码,集成springmvc,借助注解实现返回json数据在控制器上注解@RestController或者在方法上注解@ResponseBody



subtext的相关问答
问:subtext 隐藏菜单栏怎么还原 如何获取到echarts框架的subtext
答:在原来的菜单栏下方有个“组织”。点击它旁边的倒三角,在弹出的菜单中选择“布局”,而二级菜单中就有“菜单栏”了。将它勾上,即可显示了。
以上就是关于subtext(文本编辑器sublime)的全部内容,相关问答subtext 隐藏菜单栏怎么还原,如何获取到echarts框架的subtext,更多精彩内容请继续关注蚂蚁资源网。
(责任编辑:
林势俊)