// 1.加载相应的js文件
<script src="echarts.min.js"></script>
// 2.创建需要放入的div
<div id="main" style="width: 600px;height:400px;"></div>
// 3.填写相应的代码
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
option = {
title: { // 图表标题
text: '某楼盘销售情况', // 大标题
subtext: '纯属虚构' // 二级标题
},
tooltip: { // 提示框组建,鼠标停留时显示
trigger: 'axis'
},
legend: { // 图例组建
data:['意向','预购','成交']
,
selectedMode : false,// 不关半数据点
},
toolbox: { // 工具栏
show: true,
feature: {
magicType: {
show: true,
type: ['bar', 'tiled'] // 切换显示图表
},
saveAsImage: {show: true} // 保存为图片
}
},
xAxis: [{// // 直角坐标系 grid 中的 x 轴,最多可做出两个x轴
type: 'category',
boundaryGap: false,
position : 'top', // 默认为bottom
data: ['周一','周二','周三','周四','周五','周六','周日']
}],
yAxis: [{ // 直角坐标系 grid 中的 y 轴,最多可做出两个y轴
type: 'value'
}],
series: [{ // 系列列表,也就是数据图
name: '成交',
type: 'line',// 图表类型
smooth: true, // 是否平滑曲线显示
showAllSymbol : true, // 显示所有点
symbol : 'circle', // 数据点的形状,默认为圆点
data: [10, 12, 21, 54, 260, 830, 710],
lineStyle:{
normal:{color : "blue"}
}
},{
name: '预购',
type: 'line',
smooth: true,
data: [30, 182, 434, 791, 390, 30, 10]
},{
name: '意向',
type: 'line',
smooth: true,
data: [, ,601, 234, 120, 90, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
其它相应的属性可查看API
// 如果想要动态附值数据,可以添加如下代码
myChart.setOption(option, true); // 使用刚指定的配置项和数据显示图表。 myChart.setOption({ series: [{ name: '意向', // 必须和series的name属性相同 data: [1,2,3,4,5] }] });
// 想要隐藏线,只需把线的透明度设为0便可
lineStyle:{
normal:{
opacity : 0
}
}
// 鼠标提示框,只需要在tooltip里,设置backgroundColor属性
backgroundColor : '#666'
相关推荐
这是一张铅笔折线图PPT背景图片; 关键词:黄色铅笔幻灯片背景图片,折线图、折线PowerPoint背景图片,.jpg格式;
可手点画折线图的view,支持磁性选点 必看: 1.拷进工程就可以像平常的view组件一样使用 2.更改类中的常量即可改变坐标位置,原点位置等 3.view中未设置切换线条的选择器,默认一条线,请在调用view时自行添加逻辑 ...
* 画折线 * * @param canvas */ private void drawLine(Canvas canvas) { Xoffset = ((getWidth()) - 20) / (xlist.size()); Yoffset = (getHeight()) / (ylist.size()); Log.i("texts", "X=" + ...
电动汽车:面对质疑算清三笔账——对新能源汽车推广和发展现状的调查与思考.pdf
1.3D打印笔制作 2.书桌用具(笔筒、名字牌、挂架、底座)
硬笔书法第六讲《基本笔画——提折》课件图文精选.pptx
钢笔行书教程——沈鸿根.doc
燕十八 封笔之作——MySQL优化 燕十八 封笔之作——MySQL优化 燕十八 封笔之作——MySQL优化
史上最全的redis笔计,从零开始学习,包括redis简介、安装、数据类型、持久化、常用命令、主从模式、集群模式、哨兵模式、spring\springboot整合redis等相关内容!
对xen虚拟技术,通过系统学习之后的总结。
这是一张铅笔折线图PPT背景图片; 关键词:黄色铅笔幻灯片背景图片,折线图、折线PowerPoint背景图片,.jpg格式;
这是一张铅笔折线图PPT背景图片; 关键词:黄色铅笔幻灯片背景图片,折线图、折线PowerPoint背景图片,.jpg格式;
NULL 博文链接:https://javaeedevelop.iteye.com/blog/1156744
Photoshop_CS5百变画笔系列28——破碎的撕边效果.d
引入该js文件,根据百度echarts-api文档说明,可以在web端开发各种类型的图表显示
Photoshop_CS5百变画笔系列6——飘逸的雪花特效
幼儿美术课件《笔筒超轻泥——超轻粘土+纸杯》.ppt
这是一种磁笔支持软件,还可以鼠标书写,也可以截图,而且这个文件比较小,十分方便。
6-15铅笔带来的启发——铅笔的智慧模板.ppt