如何在网页中用echarts图表插件做出静态呈现效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="jquery-1.9.1.min.js"></script>
<script src="echarts.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/extension/dataTool.min.js" type="text/javascript" charset="utf-8" async defer></script>
<script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts.simple.min.js" type="text/javascript" charset="utf-8" async defer></script>
<script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts.js" type="text/javascript" charset="utf-8" async defer></script>
<script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts.common.min.js" type="text/javascript" charset="utf-8" async defer></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main')); var data = [
[5000, 10000, 6785.71],
[4000, 10000, 6825],
[3000, 6500, 4463.33],
[2500, 5600, 3793.83],
[2000, 4000, 3060],
[2000, 4000, 3222.33],
[2500, 4000, 3133.33],
[1800, 4000, 3100],
[2000, 3500, 2750],
[2000, 3000, 2500],
[1800, 3000, 2433.33],
[2000, 2700, 2375],
[1500, 2800, 2150],
[1500, 2300, 2100],
[1600, 3500, 2057.14],
[1500, 2600, 2037.5],
[1500, 2417.54, 1905.85],
[1500, 2000, 1775],
[1500, 1800, 1650]
];
var cities = ['北京', '上海', '深圳', '广州', '苏州', '杭州', '南京', '福州', '青岛', '济南', '长春', '大连', '温州', '郑州', '武汉', '成都', '东莞', '沈阳', '烟台'];
var barHeight = 50; option = {
title: {
text: '在中国租个房子有多贵？',
subtext: '市中心一室月租费（数据来源：https://www.numbeo.com）'
},
legend: {
show: true,
data: ['价格范围', '均值']
},
grid: {
top: 100
},
angleAxis: {
type: 'category',
data: cities
},
tooltip: {
show: true,
formatter: function (params) {
var id = params.dataIndex;
return cities[id] + '<br>最低：' + data[id][0] + '<br>最高：' + data[id][1] + '<br>平均：' + data[id][2];
}
},
radiusAxis: {
},
polar: {
},
series: [{
type: 'bar',
itemStyle: {
normal: {
color: 'transparent'
}
},
data: data.map(function (d) {
return d[0];
}),
coordinateSystem: 'polar',
stack: '最大最小值',
silent: true
}, {
type: 'bar',
data: data.map(function (d) {
return d[1] - d[0];
}),
coordinateSystem: 'polar',
name: '价格范围',
stack: '最大最小值'
}, {
type: 'bar',
itemStyle: {
normal: {
color: 'transparent'
}
},
data: data.map(function (d) {
return d[2] - barHeight;
}),
coordinateSystem: 'polar',
stack: '均值',
silent: true,
z: 10
}, {
type: 'bar',
data: data.map(function (d) {
return barHeight * 2
}),
coordinateSystem: 'polar',
name: '均值',
stack: '均值',
barGap: '-100%',
z: 10
}],
legend: {
show: true,
data: ['A', 'B', 'C']
}
}; // 使用刚指定的配置项和数据显示图表。
myChart.setOption(option); </script>
</body>
</html>
步骤一：引入echarts相关JS库
<script src="echarts.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/extension/dataTool.min.js" type="text/javascript" charset="utf-8" async defer></script>
<script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts.simple.min.js" type="text/javascript" charset="utf-8" async defer></script>
<script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts.js" type="text/javascript" charset="utf-8" async defer></script>
<script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts.common.min.js" type="text/javascript" charset="utf-8" async defer></script>
步骤二：
下边JS中加入这句话：var myChart = echarts.init(document.getElementById('main'));
下边JS中末尾加入这句话：
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
中间就是demo中的JS示例代码了；
具体文件下载路径：https://i.cnblogs.com/Files.aspx
如何在网页中用echarts图表插件做出静态呈现效果的更多相关文章
- Echarts图表插件(4.x版本)使用（二、带分类筛选的多个图表/实例化多个ECharts，以关系图/force为例）
导读 如果想在一个页面里实例化带分类筛选的多个Echarts该怎么做呢? 曾探讨了带分类选择的关系图显示为自定义图片的需求实现,传送门ECharts图表插件(4.x版本)使用(一.关系图force节点 ...
- ECharts图表插件(4.x版本)使用（一、关系图force节点显示为自定义图像/图片，带分类选择）
导读 ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safar ...
- vue3.x版本安装element-ui、axios及echarts图表插件
项目中安装使用element-UI 命令行: vue add element 安装成功后,项目会自动将element-UI引入项目中,刷新项目即可 项目中安装使用axios数据请求 vue add a ...
- 在内网中 vue项目添加ECharts图表插件
原文地址:https://www.cnblogs.com/aknife/p/11753854.html 最近项目中要使用到图表 但是项目在内网中无法直接使用命令安装 然后我在外网中弄个vue的项目(随 ...
- vue项目全局引入vue-awesome-swiper插件做出轮播效果
在安装了vue的前提下,打开命令行窗口,输入vue init webpack swiper-test,创建一个vue项目且名为swiper-test(创建速度可能会有点慢,耐心等),博文讲完后,源码托 ...
- 【可视化】DataV接入ECharts图表库 可视化利器强强联手
DataV接入ECharts图表库 可视化利器强强联手 摘要: 两个扛把子级产品的结合,而且文末有彩蛋. DataV 数据可视化是搭建每年天猫双十一作战大屏的幕后功臣,ECharts 是广受数据可视化 ...
- 使用jqPrint.js调用浏览器打印界面，打印网页中的某一部分该部分含有ECharts图表
1.准备好js文件(我用的是谷歌浏览器) 这个文件是为了防止你的jQuery版本过高而不适配的问题 这是调用浏览器打印的js插件 2.引入js文件 <script src="js/jq ...
- 数据图表插件echarts（二）
前言 上一篇文章简单介绍了一下百度公司前端部门写的一个js插件echarts,这是一款很强大的图表插件,里面的地图控件也是很强大的,支持离线的使用,并且数据也是离线的,使用很方便.下面我就简单介绍一下 ...
- 图表插件使用汇总（echarts，highchairts）
1.echarts之饼图显示数字 option={ title: { text: '某站点用户访问来源', subtext: '纯属虚构', x: 'center' }, tooltip: { tri ...
随机推荐
- P1460 健康的荷斯坦奶牛 Healthy（DFS）
思路:这道题还是用了小小的剪枝,这里要注意的是该题有很多中构建树的顺序,但是,在这众多顺序中不一定都能保证输出的方案字典序最小. 构建搜索树:如图构建 剪枝,emmm,看代码: #include< ...
- PHPsql
下面员工3的薪水大于其主管的薪水,一条SQL找到薪水比下属低的主管 id username salary pid 1 a 3000 null 2 b 8000 null 3 c 5000 1 4 d ...
- Nginx 反向代理 -- 一路上的坑转载
个人学习之用转子https://www.cnblogs.com/xjbBill/p/7477825.html 前些天刚过来新公司上班,公司的项目都挺多的,只不过项目都是第三方公司团队开发的,现在本公司 ...
- 010_vim和python整合开发
一.vim-go使用经验总结 Official Webset: https://github.com/fatih/vim-go-tutorial :GoFmt #格式化golang代码 二. 1. 一 ...
- leetcode 153. Find Minimum in Rotated Sorted Array 、154. Find Minimum in Rotated Sorted Array II 、33. Search in Rotated Sorted Array 、81. Search in Rotated Sorted Array II 、704. Binary Search
这4个题都是针对旋转的排序数组.其中153.154是在旋转的排序数组中找最小值,33.81是在旋转的排序数组中找一个固定的值.且153和33都是没有重复数值的数组,154.81都是针对各自问题的版本1 ...
- Luogu2860 [USACO06JAN]冗余路径Redundant Paths
Luogu2860 [USACO06JAN]冗余路径Redundant Paths 给定一个连通无向图,求至少加多少条边才能使得原图变为边双连通分量 \(1\leq n\leq5000,\ n-1\l ...
- P4550 收集邮票-洛谷luogu
传送门 题目描述 有n种不同的邮票,皮皮想收集所有种类的邮票.唯一的收集方法是到同学凡凡那里购买,每次只能买一张,并且买到的邮票究竟是n种邮票中的哪一种是等概率的,概率均为1/n.但是由于凡凡也很喜欢 ...
- [03] 线程同步 synchronized
1.线程同步概述 线程之间有可能共享一些资源,比如内存.文件.数据库等.多个线程同时读写同一份共享资源时,就可能引起冲突,所以引入了线程的"同步"机制. 所谓同步,就是说线程要有先 ...
- SpringMVC处理跨域请求时的一个注意事项
由于公司对SpingMVC框架里面的东西进行了扩展,在配置SpringMVC时没有使用<mvc:annotation-driven>这个标签.而且是自己手动来配置HandlerMa ...
- 重装mysql后导致Navicat连接失败
今天重装了mysql数据库,然后再使用navicat去连接数据库的时候,一直报错 1251 Client does not support authentication protocol reques ...