关于使用echarts.js插件写的一个折线图demo
来源:互联网 发布:ncut算法优劣 编辑:程序博客网 时间:2024/06/06 18:47
近来由于工作需要,研究了一下echarts.js这个插件,顿时觉得这款插件太过牛逼,不得不拜服。废话不多说,接下来直接上demo.
html部分: <div id="charts" ></div> //首先定义一个div放置图表
css部分: #charts{//给DIV定义宽高
width: 300px;
height: 50px;
}
js部分:<script src="js/jquery-2.1.4.min.js"></script>//引入路径
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script>
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/bar' // 使用柱状图就加载bar模块,按需加载
],
function (ec) {
// 基于准备好的dom,初始化echarts图表
var myChart = ec.init(document.getElementById('charts'));
var option = {
tooltip: { // 气泡提示配置
trigger: 'item', // 触发类型,默认数据触发,可选为:'axis'
},
xAxis: [ // 直角坐标系中横轴数组
{
type: 'category', // 坐标轴类型,横轴默认为类目轴,数值轴则参考yAxis说明
data: ['07.26', '07.27', '07.28', '07.29', '07.30', '07.31']
}
],
yAxis: [ // 直角坐标系中纵轴数组
{
type: 'value', // 坐标轴类型,纵轴默认为数值轴,类目轴则参考xAxis说明
}
],
series: [
{
name: '', // 系列名称
type: 'bar', // 图表类型,折线图line、散点图scatter、柱状图bar、饼图pie、雷达图radar
data: [11200, 23000, 45000, 56000, 63300, 94003],
itemStyle : {
normal : {
color:'#08b5f7',
borderColor:'#08b5f7',
borderRadius: '50%' ,
label : {
show : false,
position : 'top',
textStyle : {
color:'#bbbbbb'
}
},
lineStyle:{
color:'#08b5f7'
}
}
},
},
]
};
myChart.setOption(option);
}
)
</script>
最后显示的结果如图所示:
- 关于使用echarts.js插件写的一个折线图demo
- echarts动态加载折线图数据demo
- echarts动态加载折线图数据demo
- ECharts 一个很好用的JS插件
- angular使用echarts折线图
- 使用echarts插件画折线图,及echarts配置项解释
- 百度Echarts图表JS插件的使用
- 一个手机图表(echarts)折线图的封装
- php+echarts+ajax完成一个简单的折线图
- js写插件demo
- 仿echarts的折线图
- Echarts折线图的实例
- ECHARTS的基本使用:柱状图、折线图、饼图等
- Echarts柱状图与折线图的基本使用
- 关于echarts 图标的 demo
- Ext写的一个折线图
- 使用echarts实现动态显示折线图
- 使用echarts动态设置多重折线图
- ssh-keygen 的man手册译文
- UVA2070-Interesting Numbers
- 第一篇博客
- C++全局变量与静态变量构造析构顺序问题
- Python学习笔记 --- ImportError: No module named sqlalchemy
- 关于使用echarts.js插件写的一个折线图demo
- 利用Tcp通信模式实现登陆验证(单线程)
- U-Boot常用命令和常用环境变量
- 希尔排序详解
- startActivityForResult用法
- android ListView异步加载图片,完美实现图文混排
- 串口异步收发的实现
- easyui form表单.serialize()序列化后中文乱码问题原因及解决
- codeforces AIM Tech Round 3 (Div. 2) (A~D)