echarts实现折线图（移动端自适应）

最新推荐文章于 2024-03-16 16:21:42 发布

唐小亭

最新推荐文章于 2024-03-16 16:21:42 发布

阅读量1.1w

点赞数 2

分类专栏： echarts 文章标签： echarts移动端

echarts 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body>
<div id="echarts-line" style="height:600px;">
<div id="container" style="height:80%;"></div>
   </div>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
<script type="text/javascript">

           var dom = document.getElementById("container");
           var myChart = echarts.init(dom);
           window.onresize = myChart.resize; // 适应屏幕放大缩小
           var app = {};
           option = null;
           option = {
           baseOption: {
               title: {
                   text: '某楼盘销售情况',
                   subtext: '纯属虚构'
               },
               tooltip: {
                   trigger: 'axis'
               },
               legend: {
                   data:['意向','预购','成交']
               },
               toolbox: {
                   show: true,
                   feature: {
                   /* magicType: {show: true, type: ['stack', 'tiled']},*/
                       saveAsImage: {show: true} //可下载图片
                   }
               },
               grid: {
                                   left: '10%', //设置canvas图距左的距离
                                   top: '20%',
                                   right: '10%',
                                   bottom: '10%'
                               },
               xAxis: {
                   type: 'category',
                   boundaryGap: false,
                   data: ['周一','周二','周三','周四','周五','周六','周日']
               },
               yAxis: {
                   type: 'value'
               },
               series: [{
                   name: '成交',
                   type: 'line',
                   smooth: true,
                   data: [10, 12, 21, 54, 260, 830, 710]
               },
               {
                   name: '预购',
                   type: 'line',
                   smooth: true,
                   data: [30, 182, 434, 791, 390, 30, 10]
               },
               {
                   name: '意向',
                   type: 'line',
                   smooth: true,
                   data: [1320, 1132, 601, 234, 120, 90, 20]
               }]
               }
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</body>
</html>

唐小亭

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
echarts实现折线图（移动端自适应）

&lt;!DOCTYPE html&gt;&lt;html style="height: 100%"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="echarts-line"
复制链接

扫一扫