Layer+Echarts构建弹出层折线图的方法
142 浏览量
2020-12-13
16:32:29
上传
评论
收藏 61KB PDF 举报
Layer+Echarts构建弹出层折线图的方法构建弹出层折线图的方法
layer是一款口碑极佳的web弹层组件,她具备全方位的解决方案,致力于服务各个水平段的开发人员,您的页面会轻松地拥有丰富
而友好的操作体验。
在中国可视化生态系统中，ECharts 通过提供方便丰富的可视化图表，极大缩短了用户与数据的距离。个人认为是最好用的可
用来生成图表的插件。
现在使用Layer和Echarts构建弹出层折线图。
下载好所需要用到的工具包，Echarts下载为echarts.min.js，Layer在layer官网下载之后将layer文件夹放到项目之中。
在在HTML文件中引入文件中引入
<script src="js/jquery-1.11.1.min.js"></script>
<!-- 你必须先引入jQuery1.8或以上版本 -->
<script src="js/layer/layer.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- 引入 ECharts 文件 -->
<script src="js/echarts.min.js"></script>
页面内容页面内容
<body>
<button id="test2">Layer+Echarts构建弹出层折线图</button>
<div id="speedChart" style="display: none;">
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="speedChartMain" style="width: 600px; height: 400px;"></div>
</div>
<div id="dfd">
<span>Layer+Echarts构建弹出层折线图</span>
<p>Layer+Echarts构建弹出层折线图</p>
</div>
</body>
js脚本脚本
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('speedChartMain'));
option = {
tooltip: {
trigger: 'axis'
},
legend: {
data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎'] },
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一','周二','周三','周四','周五','周六','周日'] },
yAxis: {
type: 'value'
},
series: [
{
name:'邮件营销',
type:'line',
stack: '总量',
data:[120, 132, 101, 134, 90, 230, 210] },
{
资源评论
