echarts画折线图

最新推荐文章于 2024-05-10 09:53:36 发布

agai0925

最新推荐文章于 2024-05-10 09:53:36 发布

阅读量616

点赞数

分类专栏： js 文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/agai25/article/details/125545599

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

echarts画折线图

先上echarts官网下周echarts.js插件引入

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      *{
        margin: 0;
        padding: 0;
      }
      .container{
      display: flex;
      justify-content: space-between;
      width: 100%;
      height: 100vh;
      flex-wrap: wrap;
      }
      .item{
        width: 40%;
        height: 500px;
      }
    </style>
  </head>
  <body>

    <div class="container">

    </div>
  </body>
  <script src="./echarts.js"></script>
  <script src="./demo.js"></script>
  <script>
    let array_number = 4
    add(array_number)
    let array = [0.15, 0.2, 0.05, 0.22, 0.18, 0.19] //y轴数值 
    let title = 'P0  总进水压力' //表格名字
    let name_y = 'MPa'//y轴单位
    let name_x = '时间'//x轴单位
    let max_y = 0.5 //y的最大值
    let main = 'main1' // div的id
    let main2 = 'main2'
    let main3 = 'main3' 
    let num_error = 0.1
    let warn = false //是否显示警戒线
    demo(array,main,title,name_x,name_y,max_y,num_error,warn)
    demo(array,main2,title,name_x,name_y,max_y,num_error,true)
    demo(array,main3,title,name_x,name_y,max_y,num_error,warn)
    demo(array,'main4',title,name_x,name_y,max_y,num_error,warn)
  </script>
</html>

function add(i){
    for (let index = 0; index <i; index++) {
        let container = document.querySelector('.container')
        container.innerHTML+=`<div id="main${index+1}" class="item" ></div>`       
    }
}

function demo(array,main,title,name_x,name_y,max_y,num_error,warn){
var chartDom = document.getElementById(main);
var myChart = echarts.init(chartDom);
var option;
let indexList = []
for(var i =1;i<array.length;i++){
    indexList.push(i)
}

option = {
    title:{
show:true,
text:title,
top:'90%',
left:'15%',
textStyle:{
    fontSize :22
}
    },
  tooltip: {
    show: false,
    trigger: "axis",
  },
//x轴的数据
  xAxis: {
    type: "category",//value数值，category种类
    axisLabel: { show: false,showMaxLabel:false },//轴隐藏
    data: indexList,//x数据
    name: name_x,//x名字
    axisLine: { symbol: ["none", "arrow"] },//箭头
    axisTick:{show:false}
    
  },
  yAxis: {
    show:true,
    type: "value",//type
    name: name_y,//y名字
    //boundaryGap:[0,0.5],
    axisLine: { symbol: ["none", "arrow"],show:true, },
    axisLabel:{show:true,
        interval:2,
        showMaxLabel:true,  
        //获取最大值和最小值
        formatter:function (value,index){
            if(index==0){
                return value
            }
            if(index==5){
                return value
            }
           
        }       
    },
    axisTick:{show:false},
    max:max_y,
  },
  //数据
  series: [
    {
      data: array,
      type: "line",//
      smooth: true,
    //   showSymbol:false, //坐标点隐藏
      itemStyle: {
        normal: {
          label: {
            show: true,//显示坐标数值
            position:'top',
            color:'#000',
          },
        },
      },
      lineStyle:{
        normal:{
            color:'#000'
        }
      },
      markLine: {
        symbol: ["none", "none"], //['none']表示是一条横线；['arrow', 'none']表示线的左边是箭头，右边没右箭头；['none','arrow']表示线的左边没有箭头，右边有箭头
        label: {
          position: "start", //将警示值放在哪个位置，三个值“start”,"middle","end" 开始 中点 结束
        },
        data: [
          {
            silent: false, //鼠标悬停事件 true没有，false有
            lineStyle: {
              //警戒线的样式 ，虚实 颜色
              type: "solid", //样式  ‘solid’和'dotted'
              color: "#FA3934",
              width: 3, //宽度
            },
            yAxis:num_error, // 警戒线的标注值，可以有多个yAxis,多条警示线 或者采用 {type : 'average', name: '平均值'}，type值有 max min average，分为最大，最小，平均值
          },
        ],
      },

    },
  ],
};
if(warn==false){
    delete option.series[0].markLine
}
console.log(option.series[0])
option && myChart.setOption(option);
}