echarts使用心得（折线图）

折线图的使用

使用最新的echarts版本，引入script文件

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.2.0/echarts.min.js"></script>

html中放置一个div便可
js：

// 1.实例化对象
    var myselect = document.getElementById("yearSelectqye");　　//获取select对象，括号里为id
    let months = ['一月', '二月', '三月', '四月', '五月', '六月', '七月','八月','九月','十月','十一月','十二月']
     // 2.指定配置项和数据
       var option = {
           legend: {
               // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
               orient: 'horizontal',
               // x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
               x: 'left',
               // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
               y: 'top',
               data: []
           },

           //  图表距边框的距离,可选值：'百分比'¦ {number}（单位px）
           grid: {
               top: '16%',   // 等价于 y: '16%'
               left: '3%',
               right: '8%',
               bottom: '3%',
               containLabel: true
           },

           // 提示框
           tooltip: {
               trigger: 'axis'
           },
           xAxis: {

               type: 'category',
               confine:true,
               axisLine: {
                   lineStyle: {
                       // 设置x轴颜色
                       color: "rgba(255,255,255,0.6)",
                       width: 2
                       // color: '#912CEE'
                   }
               },
               // 设置X轴数据旋转倾斜
               axisLabel: {
                   rotate: 30, // 旋转角度
                   interval: 0  //设置X轴数据间隔几个显示一个，为0表示都显示
               },
               // boundaryGap值为false的时候，折线第一个点在y轴上
               boundaryGap: false,
               data: months
           },
           yAxis: {
               name: '单位:（万元）',
               type: 'value',
               // min:0, // 设置y轴刻度的最小值
               // max:1800,  // 设置y轴刻度的最大值
               // splitNumber:9,  // 设置y轴刻度间隔个数
               axisLine: {

                   color: "rgba(255,255,255,0.6)",
                   fontSize: 10
               },
               axisLine: {
                   show:true,
                   lineStyle: {
                       color: "rgba(255,255,255,0.6)",
                       width: 2
                   }
               },
               // y轴分割线的颜色
               splitLine: {
                   lineStyle: {
                       color: "rgba(255,255,255,0.1)"
                   }
               }
           },
           series: [
               {
                   data: nums,
                   type: 'line',
               },
           ],
           color: ['#FFD700']
       };
       myChart.setOption(option);
 // 4.让图表随屏幕自适应
       window.addEventListener('resize', function () {
             myChart.resize();
         })