首页 > 其他分享> > 初试Echarts（之一）合并两个折线图&不同区间不同样式

初试Echarts（之一）合并两个折线图&不同区间不同样式

2022-02-08 23:00:25 作者：互联网

①效果

折线1和折线2为拆分版本，折线3为合并版本。

合并方法是采用两个series元素，并分别设置lineStyle

②原生JS版本

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="echarts.js"></script>
    <style>
            main {
                /*对子元素开启弹性布局*/
                display: flex;
                /*弹性元素在必要的时候换行*/
                flex-wrap: wrap;
                /*将弹性元素居中*/
                justify-content: center;
            }
    </style>
  </head>
  <body>
    <main>
    </main>
    <script type="text/javascript">
      const WIDTH = 600;
      const HEIGHT = 400;

      // main用来放div1 div2 div3
      let container = document.querySelector('main')

      // div1用来放折线图1
      let div1 = createDiv(WIDTH, HEIGHT)
      container.appendChild(div1)

      // div2用来放折线图2
      let div2 = createDiv(WIDTH, HEIGHT)   
      container.appendChild(div2)

      // div3用来放折线图3
      let div3 = createDiv(WIDTH * 2, HEIGHT, 'none')   
      container.appendChild(div3)      

      // 创建空图
      let lineChart1 = echarts.init(div1)
      let lineChart2 = echarts.init(div2)
      let lineChart3 = echarts.init(div3)

      // 模拟两份数据
      const DATA_SIZE = 100;
      let packets = makeDate(DATA_SIZE)
      let packets1 = packets.slice(0, DATA_SIZE / 2)
      let packets2 = packets.slice(DATA_SIZE / 2, DATA_SIZE)

      // 将数据填充到折线图
      lineChart1.setOption({
          title: {
            text: '折线1',
          },
          xAxis: {
            data: packets1.map(p => p.time)
          },
          yAxis: {},
          series: [
            {
              data: packets1.map(p => p.data),
              type: 'line',
              lineStyle: {
                color: 'black',
              }
            }
          ]          
      })

      lineChart2.setOption({
          title: {
            text: '折线2',
          },
          xAxis: {
            data: packets2.map(p => p.time)
          },
          yAxis: {},
          series: [
            {
              data: packets2.map(p => p.data),
              type: 'line',
              lineStyle: {
                color: 'black',
                type: 'dashed',
                opacity: 0.5,
              }
            }
          ]          
      })  
      
      lineChart3.setOption({
          title: {
            text: '折线3',
          },
          xAxis: {
            data: packets1.concat(packets2).map(p => p.time)
          },
          yAxis: {},
          series: [
            {
              data: packets1.map(p => p.data),
              type: 'line',
              lineStyle: {
                color: 'black',
              }
            },
            {
              data: packets1.concat(packets2).map(p => p.data),
              type: 'line',
              lineStyle: {
                color: 'black',
                type: 'dashed',
                opacity: 0.5,
              }
            }        
          ]          
      }) 
      
      function createDiv(width, height, display = 'block') {
        let result = document.createElement('div')
        result.style.width = width + 'px'
        result.style.height = height + 'px'
        // result.style.display = display
        return result
      }      

      function makeDate(dataSize) {
        let result = [];
        for (let i = 0; i != dataSize; ++i) {
          result.push({
            time: "t" + i,
            data: Math.random(),
          })
        }
        return result;
      }
    </script>
  </body>
</html>

③Vue.js版本

待续

标签：初试,map,type,packets1,let,result,折线图,data,Echarts
来源： https://www.cnblogs.com/xkxf/p/15872787.html