餐E评echarts
所需要的数据结构
option = {
num:1212,//商圈数
numRate:34%,//商圈增长率
activation:1231,//活跃度
activationRate:23%,//活跃度增长
legend:['全市平均','酒仙桥'],
series : [{
data:[120, 118, 130]
},
{
data:[120, 118, 130]
},
]
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/echarts/3.7.1/echarts.js"></script>
</head>
<body>
<div id="app" style="height: 400px;">
</div>
<script>
var ec = echarts.init(document.querySelector('#app'));
var option = {
title: {
text: '自定义雷达图'
},
legend: {
data: ['全市平均','酒仙桥'],
right: '5%'
},
radar: [
{
indicator: [
{ text: '环境', max: 150 }, { text: '口味', max: 150 }, { text: '服务', max: 150 }
],
center: ['75%', '50%'],
radius: 120
}
],
series: [
{
name: '成绩单',
type: 'radar',
data: [
{
value: [120, 118, 130],
name: '全市平均',
itemStyle : {
normal:{
color:'#9BDADC'
}
},
label: {
normal: {
show: true,
formatter:function(params) {
return params.value;
}
}
},
areaStyle: {
normal: {
opacity: 0.9,
color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
{
color: '#9BDADC',
offset: 0
},
{
color: '#9BDADC',
offset: 1
}
])
}
}
},
{
value: [90, 90, 100],
name: '酒仙桥',
itemStyle : {
normal:{
color:'#B3D3E2'
}
},
areaStyle: {
normal: {
opacity: 0.9,
color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
{
color: '#B3D3E2',
offset: 0
},
{
color: '#B3D3E2',
offset: 1
}
])
}
}
}
]
}
]
}
ec.setOption(option);
</script>
</body>
</html>
餐E评echarts的更多相关文章
- [struts2]struts结合ECharts的用法
<script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script> < ...
- echarts教程-asp.net+ashx实现堆积柱状
说说看.崔西莲夫人紧接着说. 想不到史春吉是这种人. 你会这样说倒是有趣,因为这正是我当时的感觉.这跟奈维尔的个性不合.奈维尔,就像大部分男人一样,通常都是尽量避开任何可能造成尴尬或不愉快的场面.我怀 ...
- echarts pie饼状图绑定点击事件
var valueData = [ {value: 33,name: '诊所'}, {value: 29,name: '汽车服务相关'}, {value: 27, name: '洗衣店'}, {val ...
- 一起来玩echarts系列（一）------箱线图的分析与绘制
一.箱线图 Box-plot 箱线图一般被用作显示数据分散情况.具体是计算一组数据的中位数.25%分位数.75%分位数.上边界.下边界,来将数据从大到小排列,直观展示数据整体的分布情况. 大部分正常数 ...
- Webstorm+Webpack+echarts构建个性化定制的数据可视化图表&&两个echarts详细教程（柱状图，南丁格尔图）
Webstorm+Webpack+echarts ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（67）-MVC与ECharts
系列目录 ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Fire ...
- echarts+php+mysql 绘图实例
最近在学习php+mysql,因为之前画图表都是直接在echart的实例demo中修改数据,便想着两相结合练习一下,通过ajax调用后台数据画图表. 我使用的是echart3,相比较第二版,echar ...
- 数据图表插件Echarts（一）
一.引言 最近做一个智慧城市项目,项目中需要图表和报表进行数据分析,从网上找了很多,最后找到了百度开放的echarts,一个很强大的插件. 二.介绍 ECharts,缩写来自Enterprise Ch ...
- ECharts数据图表系统？ 5分钟上手！
目录: 前言 简介 方法一:模块化单文件引入(推荐) 方法二:标签式单文件引入 [前言] 最近在捣鼓各种插件各种框架,发现这个ECharts还是比较不错的,文档也挺全的,还是中文的,给大家推荐一下. ...
随机推荐
- Builgen 插件——IntelliJ IDEA和Eclipse Java Bean Builder模式代码生成器-比lombok更符合需求
builder模式在越来越多的项目中使用,类似于alibaba fastjson JSONObject.fluentPut(),调用一个方法后返回这个对象本身,特别适合构建一些参数超级多的对象,代码优 ...
- Springboot项目修改html后不需要重启---springboot项目的热部署
一.spring-boot-devtools 在pom中直接引入依赖 <dependency> <groupId>org.springframework.boot</gr ...
- 对于ListView的一些用法（一）
ScrollView:只能用于控件比较少的界面,如果数据有上千上万条,那么使用ScrollView就不好了,因为ScrollView就把所有的控件进行初始化,这是非常消耗性能的操作,所以android ...
- QWidget设置背景图
1.使用QSS出现很多问题 2.方法 this->setAutoFillBackground(true); QPalette palette = this->palette(); pale ...
- 新建一个Windows Service的方法
http://www.cnblogs.com/YanPSun/archive/2010/05/22/1741381.html http://blog.csdn.net/m15188153014/art ...
- Flask学习【第2篇】：Flask基础
知识点回顾 flask依赖wsgi,实现wsgi的模块:wsgiref,werkzeug,uwsgi 实例化Flask对象,里面是有参数的 app = Flask(__name__,template_ ...
- Nvme固体硬盘Intel750,SM961分别使用一段时间以后对比
在SM961使用了一年半(2017年1月17日购买)后,再次测试,这次测试使用AS_SSD_Benchmark工具进行测试 感觉CrystalDiskMark工具测出来的分数在所以工具中分数最高 看图 ...
- 更新32位Spyder从3.0.0-> 3.2.3
https://stackoverflow.com/questions/51222550/how-to-update-spyder-3-3-0 It works!! 1. went to the An ...
- 题解——洛谷P2827 NOIP提高组 2016 蚯蚓
队列模拟 详细题解待填坑 #include <cstdio> #include <algorithm> #include <queue> #include < ...
- LightOJ 1268 Unlucky Strings（KMP+矩阵乘法+基础DP）
题意 给出字符串的长度 \(n\) ,以及该字符串是由哪些小写字母组成,现给出一个坏串 \(S\) ,求存在多少种不同的字符串,使得其子串不含坏串. \(1 \leq n \leq 10^9\) \( ...