Echarts图表之线性图、柱形图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Echarts图表</title>
<!-- 引入echarts.min.js -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var option = {
backgroundColor: 'rgba(1,202,217,.2)',
grid: {
left: 60,
right: 60,
top: 50,
bottom: 40
},
//工具栏组件
toolbox: {
//辅助线开关
feature: {
//数据视图工具
dataView: {
show: true,
readOnly: false
},
//动态类型切换
magicType: {
show: true,
//线性图,柱形图
type: ['line', 'bar']
},
//配置项还原
restore: {
show: true
},
//保存为图片
saveAsImage: {
show: true
}
}
},
legend: {
top: 10,
textStyle: {
fontSize: 10,
color: 'rgba(255,255,255,.7)'
},
data: ['2017年', '2018年', '同比增速']
},
xAxis: [{
//类目轴,强制显示所有文本标签
type: 'category',
axisLine: {
lineStyle: {
color: 'rgba(255,255,255,.2)'
}
},
splitLine: {
lineStyle: {
color: 'rgba(255,255,255,.1)'
}
},
axisLabel: {
color: "rgba(255,255,255,.7)"
},
data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
//配置坐标轴指示器
axisPointer: {
//坐标轴指示器的阴影样式
type: 'shadow'
}
}],
yAxis: [{
//替换显示内容
type: 'value',
name: '',
min: 0,
max: 250,
//设置刻度间隔
interval: 50,
axisLine: {
lineStyle: {
color: 'rgba(255,255,255,.3)'
}
},
splitLine: {
lineStyle: {
color: 'rgba(255,255,255,.01)'
}
},
axisLabel: {
formatter: '{value} ml'
}
},
{
type: 'value',
name: '',
max: 25,
interval: 5,
axisLine: {
lineStyle: {
color: 'rgba(255,255,255,.3)'
}
},
splitLine: {
lineStyle: {
color: 'rgba(255,255,255)'
}
},
axisLabel: {
formatter: '{value} °C'
}
}
],
series: [
{
name: '2017年',
type: 'bar',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[{
offset: 0,
color: '#b266ff'
},
{
offset: 1,
color: '#121b87'
}
]
)
}
},
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
},
{
name: '2018年',
type: 'bar',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[{
offset: 0,
color: '#00f0ff'
},
{
offset: 1,
color: '#032a72'
}
]
)
}
},
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
},
{
name: '同比增速',
type: 'line',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[{
offset: 0,
color: '#fffb34'
},
{
offset: 1,
color: '#fffb34'
}
]
)
}
},
yAxisIndex: 1,
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
}
]
};
myChart.setOption(option);
</script>
</body>
</html>
Echarts图表之线性图、柱形图相关推荐
- 利用微软平台生成报表,线性图,柱形图
说来惭愧,以前的工作中一直借助第三方dll进行报表制作,比如线性图,柱形图. 因为现在工作的这家公司不允许随便引入第三方dll,听同事说起可以建rdl类型文件进行引入到winform窗体中,窗体上使用 ...
- Echarts图表之雷达图(一)
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> ...
- echarts图表折线图柱状图多个X轴Y轴以及一个Y轴反向
echarts图表折线图柱状图多个X轴Y轴以及一个Y轴反向 option1: {color: ['#21E9F6', '#F2CE2E', '#EE2929', '#006DD9', '#1789FF ...
- 转：ECharts图表组件之简单关系图：如何轻松实现另类站点地图且扩展节点属性实现点击节点页面跳转...
站点地图不外乎就是罗列一个网站的层次结构,提炼地讲就是一个关系结构图.那么我们如何巧用ECharts图表组件内的简单关系结构图来实现一个站点的地图结构呢?另外如何点击某个节点的时候实现页面跳转呢? 针 ...
- 如何利用echarts图表获取条状图点击名称和值
如何利用echarts图表获取条状图点击名称和值 听语音 | 浏览:1505 | 更新:2017-06-13 10:20 | 标签:软件 1 2 3 4 5 6 7 分步阅读 echarts图表插件工 ...
- Echarts使用及动态加载图表数据 折线图X轴数据动态加载
Echarts简介 echarts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,来自百度...我想应该够简洁了 使用Echarts 目前,就官网的文 ...
- Echarts图表插件(4.x版本)使用（二、带分类筛选的多个图表/实例化多个ECharts，以关系图/force为例）...
导读 如果想在一个页面里实例化带分类筛选的多个Echarts该怎么做呢? 曾探讨了带分类选择的关系图显示为自定义图片的需求实现,传送门ECharts图表插件(4.x版本)使用(一.关系图force节点 ...
- Echarts 图表制作建议指南思维导图，教你什么数据画什么图
Echarts图表制作思维指南总结 ... ---- Nick.Peng 一.Echarts图表制作建议指南 有了它,开发时就知道什么样的数据画什么图了,以后画图再也不用发愁啦 ...
- JavaScript高德地图中绘制echarts图表随地图移动
JavaScript高德地图中绘制echarts图表随地图移动** 先上效果图 实现方法如下: 使用高德地图"信息窗体",信息窗体AMap.InfoWindow的属性content ...
最新文章
- 对Cost (%CPU) 粗略的理解
- Microbiome：重新定义“卫生”的概念
- 谈谈StorageEvent
- android RefBase、sp、wp
- RecyclerView复杂适配器的终极形态?代码更解耦
- python 调用linux内核api_Linux系统调用及用户编程接口（API）学习
- DevOps团队结构类型汇总：总有一款适合你
- 把十进制转为二进制到16进制
- vb.net cad 块表最后的实体_21个绘图命令+7个技巧，3分钟让你成为CAD高手
- java dateformat hh_SimpleDateFormat上的Java HH：mm和hh：mm之间的区别
- 快学scala-第七章 包和引入
- H5+个推实现消息推送服务
- STP-2-三个选择
- 三星滑盖手机java游戏_三星滑盖手机大全简介
- mldn出品java风暴_MLDN出品JAVA风暴-JAVA学习的终极资料
- 基于Hadoop技术进行地理空间分析
- 计算机学院 统计学博士点,统计学 国家重点学科/博士点/硕士点
- 金融危机下窗帘选购秘籍
- 记录习惯【Unity 3D中3D场景下嵌套2D Canvas并实现窗口缩放】
- 58同城自动登录功能 分享给大家！