欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

echart--效果

程序员文章站 2022-04-08 17:53:05
...

1/复杂的折线
echart--效果
html

<!-- gm花样折线图gm -->
 <div class="stepBox" id="stepEchart" style="height:500px;"></div>

js

//工艺流程对比--0708
function echartsData(idName, xData, lendName, allLineData, minStep, maxStep) {
  var chartrun2 = echarts.init(document.getElementById(idName))
  var optionRun2 = null
  var allData = []
  //处理得到的数据
  allLineData.map((item, index) => {
    if (index == 0 || index == 1) {
      //当前阶段数据在这个里面显示
      allData.push({
        name: lendName[index],
        type: 'line',
        // step: 'step',//
        symbol: 'circle',
        symbolSize: 4,
        sampling: 'average',
        itemStyle: {
          normal: {
            color: colorCost[index],
          },
        },
        label: {
          normal: {
            show: true,
            position: [-30, 10],
          },
        },
        markArea: { //绘制当前阶段--高亮显示
          data: [
            [
              {
                name: '当前阶段',
                xAxis: minStep,
              },
              {
                xAxis: maxStep,
              },
            ],
          ],
        },
        zlevel: 1,
        data: item,
      })
    } else if (index == 2) {
      //时间的显示数据需要特殊处理
      allData.push({
        name: lendName[index],
        type: 'line',
        // step: 'step',
        symbol: 'circle',
        symbolSize: 4,
        sampling: 'average',
        itemStyle: {
          normal: {
            color: colorCost[index],
          },
        },
        label: { //处理现实的文字,实际显示的内容和绘制线是两个内容
          normal: {
            show: true,
            position: [-30, -20],
            formatter: function (params) {
              return '{color1|' + params.data.label + '}{color2| h }'
            },
            rich: { //定义颜色样式
              color1: {
                color: '#fff',
                backgroundColor: '#108eff',
                borderColor: '#796aee',
                border: 1,
                lineHeight: 18,
                height: 18,
                padding: [0, 3, 0, 3],
                borderWidth: 1,
                borderRadius: [3, 0, 0, 3],
              },
              color2: {
                color: '#fff',
                backgroundColor: '#796aee',
                borderColor: '#796aee',
                lineHeight: 18,
                height: 18,
                borderWidth: 1,
                borderRadius: [0, 3, 3, 0],
                padding: [0, 2, 0, 1],
              },
            },
          },
        },
        zlevel: 1,
        data: item,
      })
    } else if (index == 5) {
      allData.push({
        name: lendName[index],
        type: 'line',
        // step: 'step',
        symbol: 'circle',
        symbolSize: 4,
        sampling: 'average',
        itemStyle: {
          normal: {
            color: colorCost[index],
          },
        },
        lineStyle: { //绘制线的类型是否是实线
          width: 1,
          type: 'dashed',
        },
        label: {
          normal: {
            show: true,
            position: [10, 10],
            formatter: function (params) {
              return params.data.label + 'h'
            },
          },
        },
        zlevel: 1,
        data: item,
      })
    } else {
      allData.push({
        name: lendName[index],
        type: 'line',
        // step: 'step',
        symbol: 'circle',
        symbolSize: 4,
        sampling: 'average',
        itemStyle: {
          normal: {
            color: colorCost[index],
          },
        },
        lineStyle: {
          width: 1,
          type: 'dashed',
        },
        label: {
          normal: {
            show: true,
            position: [-30, 10],
          },
        },
        zlevel: 1,
        data: item,
      })
    }
  })
  optionRun2 = {
    legend: {
      //图例
      textStyle: {
        color: '#666',
      },
      itemGap: 5,
      //orient: 'vertical',
      x: 'right',
      y: 'top',
      data: lendName,
    },
    animation: false,
    tooltip: {
      trigger: 'axis',
      formatter: function (params) { //划过之后显示的内容--params是当前点的所有线的数据
        //console.log(params)
        return `<div>流程情况[${params[0].axisValue}]</div>
          <div>
            <span class="showIcon" style="background:${params[0].color}"></span>
            ${params[0].seriesName + ': ' + params[0].value}℃
          </div>
          <div>
            <span class="showIcon" style="background:${params[1].color}"></span>
            ${params[1].seriesName + ': ' + params[1].value}℃
          </div>
          <div>
            <span class="showIcon" style="background:${params[2].color}"></span>
            ${params[2].seriesName + ': ' + params[2].data.label}h
          </div>
          <div>
            <span class="showIcon" style="background:${params[3].color}"></span>
            ${params[3].seriesName + ': ' + params[3].value}℃
          </div>
          <div>
            <span class="showIcon" style="background:${params[4].color}"></span>
            ${params[4].seriesName + ': ' + params[4].value}℃
          </div>
          <div>
            <span class="showIcon" style="background:${params[5].color}"></span>
            ${params[5].seriesName + ': ' + params[5].data.label}h
          </div>
        `
      },
    },
    toolbox: {
      left: 'center',
      itemSize: 10,
      top: 55,
    },
    xAxis: {
      data: xData,
      //boundaryGap: false,//是否起始点就显示数据
      axisPointer: {
        snap: true,
        lineStyle: {
          color: '#004E52',
          opacity: 0.5,
          width: 2,
        },
      },
      axisLabel: {
        //轴线文字
        show: true,
        textStyle: {
          fontSize: '10',
          color: '#666',
        },
        // interval: 0,
        // rotate: 40,
      },
      axisLine: {
        //轴线颜色
        lineStyle: {
          color: '#d3d3d3',
        },
      },
    },
    yAxis: {
      type: 'value',
      // axisTick: {
      //   inside: false,
      // },
      min: 19,
      splitLine: {
        show: true,
        lineStyle: {
          //网格颜色
          color: ['#e9e9e9'],
          width: 1,
          type: 'dashed',
        },
      },
      axisLabel: {
        //轴线文字
        show: true,
        textStyle: {
          fontSize: '10',
          color: '#666',
        },
        // interval: 0,
        // rotate:40,
        // inside: false,
        formatter: '{value}\n',
      },
      //z: 10,
      axisLine: {
        //轴线颜色
        lineStyle: {
          color: '#d3d3d3',
        },
      },
    },
    grid: {
      top: 60,
      left: 35,
      right: 10,
    },
    // dataZoom: [
    //   //横向滚动条
    //   {
    //     type: 'inside',
    //     throttle: 50,
    //     show: true,
    //     start: 0,
    //     end: 60,
    //   },
    //   {
    //     type: 'slider',
    //     start: 00,
    //     end: 60,
    //   },
    // ],
    series: allData,
  }
  if (optionRun2 && typeof optionRun2 === 'object') {
    chartrun2.setOption(optionRun2, true)
  }
  //跟随屏幕变化
  window.addEventListener('resize', function () {
    chartrun2.resize()
  })
}
//调用数据并处理数据--在调用echart===echartsData
$.get('111.json', function (obj) {
  console.log(obj)
  var stepDataArr = obj
  var xData = [] //x轴数据
  var dryData = [] //干球温度
  var wetData = [] //湿球温度
  var hourData = [] //升温稳温时间
  var drySetData = [] //干球温度标注
  var wetSetData = [] //湿球温度标注
  var hourSetData = [] //升温稳温时间标注
  stepDataArr.map((item, index) => {
    xData.push(item.NO) //x轴数据
    dryData.push(item.dryTemperature) //干球
    wetData.push(item.wetTemperature) //湿球
    hourData.push({ value: item.hoursY, label: item.hoursLabel })
    drySetData.push(item.dryTemperature_set) //干球标注
    wetSetData.push(item.wetTemperature_set) //湿球标注
    hourSetData.push({ value: item.hoursY_set, label: item.hoursLabel_set }) //标注时长
  })
  var allLineData = [] //线的数据
  allLineData.push(
    dryData,
    wetData,
    hourData,
    drySetData,
    wetSetData,
    hourSetData
  )
  console.log(allLineData)
  var lendName = [
    '干球温度',
    '湿球温度',
    '时间',
    '标注工艺干球温度',
    '标注工艺湿球温度',
    '标注工艺时长',
  ]
  var minStep = stepDataArr[0].Cur_Start_No
  var maxStep = stepDataArr[0].Cur_End_No
  //将处理好的数据传入绘制折线图
  echartsData('stepEchart', xData, lendName, allLineData, minStep, maxStep)
})

json

[
  {
    "NO": "0",
    "wetTemperature": "37.00",//第一条线的数据
    "dryTemperature": "38",//第二条线的数据
    "hoursLabel": "6.00",//第三条线实际显示的数据
    "hoursY": "29.00",//第三条线绘制的数据
    "wetTemperature_set": "36",//第四条线的数据
    "dryTemperature_set": "36",//第五条线的数据
    "hoursY_set": "24",//第六条线的绘制数据
    "hoursLabel_set": "0.00",//第六条线实际的显示数据
    "Cur_Start_No": 0,//当前阶段的起始点
    "Cur_End_No": 1//当前阶段的终结点
  },
  {
    "NO": "1",
    "wetTemperature": "37.00",
    "dryTemperature": "38",
    "hoursLabel": "16.00",
    "hoursY": "29.00",
    "wetTemperature_set": "36",
    "dryTemperature_set": "36",
    "hoursY_set": "24",
    "hoursLabel_set": "6.00"
  },
  {
    "NO": "2",
    "wetTemperature": "37.00",
    "dryTemperature": "40",
    "hoursLabel": "4.00",
    "hoursY": "29.00",
    "wetTemperature_set": "37",
    "dryTemperature_set": "38",
    "hoursY_set": "25",
    "hoursLabel_set": "4.00"
  },
  {
    "NO": "3",
    "wetTemperature": "37.00",
    "dryTemperature": "40",
    "hoursLabel": "18.00",
    "hoursY": "29.00",
    "wetTemperature_set": "37",
    "dryTemperature_set": "38",
    "hoursY_set": "25",
    "hoursLabel_set": "18.00"
  },
  {
    "NO": "4",
    "wetTemperature": "36.00",
    "dryTemperature": "42",
    "hoursLabel": "4.00",
    "hoursY": "28.00",
    "wetTemperature_set": "38",
    "dryTemperature_set": "40",
    "hoursY_set": "26",
    "hoursLabel_set": "6.00"
  },
  {
    "NO": "5",
    "wetTemperature": "36.00",
    "dryTemperature": "42",
    "hoursLabel": "22.00",
    "hoursY": "28.00",
    "wetTemperature_set": "38",
    "dryTemperature_set": "40",
    "hoursY_set": "26",
    "hoursLabel_set": "38.00"
  }
]
相关标签： 回顾 echart

上一篇： 【比赛回顾】广工2020程序设计初赛I-粘土人

下一篇： MySQL | GROUP_CONCAT函数，将某一列的值用逗号拼接

推荐阅读