Echarts折线图，适配可移动

概述可见：https://gallery.echartsjs.com/editor.html?c=xSaQ9DuB9T&v=1 <div id="main" style="width: 100%;height:650px;margin: 0 auto;"></div> <script>var myChart = this.$echarts.init(document.getElementById(

可见：https://gallery.echartsjs.com/editor.html?c=xSaQ9DuB9T&v=1

<div ID="main" style="wIDth: 100%;height:650px;margin: 0 auto;"></div>

<script>var myChart = this.$echarts.init(document.getElementByID(‘main‘));var option = {    Title: {        text: ‘运营商、代理商、企业会员增长趋势图（以30天为1个周期）‘,left: 0,top: 4,textStyle: {            FontFamily: ‘MicrosoftYaHei‘,FontSize: 17,color: ‘#2b3b60‘,FontWeight: 500,},backgroundcolor: ‘#fff‘,tooltip: {        trigger: ‘axis‘,axisPointer: { // 坐标轴指示器，坐标轴触发有效            type: ‘line‘ // 默认为直线，可选为：‘line‘ | ‘shadow‘        }    },grID: {        left: ‘2%‘,right: ‘4%‘,bottom: ‘14%‘,top: ‘16%‘,containLabel: true    },legend: {        data: [‘企业会员总数‘,‘代理商总数‘,‘运营商总数‘],right: 10,top: 12,textStyle: {            color: "#2b3b60"        },itemWIDth: 12,itemHeight: 10,// itemGap: 35    },xAxis: {        type: ‘category‘,data: [‘2012‘,‘2013‘,‘2014‘,‘2015‘,‘2016‘,‘2017‘,‘2018‘,‘2019‘],axisline: {            linestyle: {                color: ‘#d2d9e4‘            }        },axisLabel: {            textStyle: {                FontFamily: ‘Microsoft YaHei‘,color: ‘#6175a2‘            }        },yAxis: {        type: ‘value‘,max: ‘1200‘,axisline: {            show: false,linestyle: {                color: ‘#6175a2‘            }        },splitline: {            show: true,linestyle: {                type: ‘dashed‘,color: ‘#d2d9e4‘            }        },axisLabel: {}    },"dataZoom": [{        "show": true,"height": 15,"xAxisIndex": [            0        ],bottom: ‘8%‘,"start": 10,"end": 90,handleIcon: ‘path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,4,1.8,4V413z‘,handleSize: ‘110%‘,handleStyle: {            color: "#d3dee5",textStyle: {            color: "#6175a2"        },bordercolor: "rgba(144,151,156,0.3)"    },{        "type": "insIDe","show": true,"start": 1,"end": 35    }],serIEs: [{            name: ‘企业会员总数‘,type: ‘line‘,barWIDth: ‘15%‘,showAllSymbol: true,symbol: ‘emptyCircle‘,symbolSize: 10,//圆圈圈的大小            itemStyle: {                normal: {                    wIDth: 5,color: ‘#498cfc‘,barborderRadius: 11,// symbol:‘none‘,//去掉点的            smooth: true,//曲线变平滑的            linestyle: {                normal: {                    wIDth: 3,//折线的borderWIDth 宽                    shadowcolor: ‘rgba(73,140,252,0.5)‘,shadowBlur: 10,shadowOffsetY: 7                },data: [600,1000,600,600]        },{            name: ‘代理商总数‘,color: ‘#f9b555‘,// borderWIDth: 1,//折点圆圈大小                }            },smooth: true,shadowcolor: ‘rgba(249,181,85,data: [400,400,400]        },{            name: ‘运营商总数‘,//圆圈圈的大小            itemStyle: {                normal: {                    show: true,color: ‘#55cf96‘,}            },shadowcolor: ‘rgba(85,207,150,data: [1000,1200,1000]        }    ]};myChart.setoption(option);setTimeout(function (){　　window.onresize = function () {　　　　myChart.resize();　　　　myChartDevice.resize();　　}},200)</script>    

总结

以上是内存溢出为你收集整理的Echarts折线图，适配可移动全部内容，希望文章能够帮你解决Echarts折线图，适配可移动所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。