Echarts在线免费图表

 
            var time = ["2000", "2004", "2006", "2007", "2008", "2009", "2010", "2011", "2012", "2013"] // 底部时间
var data = [{
   name: '航空发动机', // 左侧内容
   quantityArr: [{
      count: 1000, // 每个节点的数据
      IsData: false, // 控制 true是真实数据 false是虚拟数据
   }, {
      count: 2500,
      IsData: false,
   }, {
      count: 2000,
      IsData: false,
   }, {
      count: 1500,
      IsData: false,
   }, {
      count: 2100,
      IsData: false,
   }, {
      count: 3512,
      IsData: false,
   }, {
      count: 2351,
      IsData: true,
   }, {
      count: 1243,
      IsData: true,
   }, {
      count: 2413,
      IsData: true,
   }, {
      count: 1354,
      IsData: true,
   }]
}, {
   name: '故障诊断',
   quantityArr: [{
      count: 1300,
      IsData: false,
   }, {
      count: 2300,
      IsData: false,
   }, {
      count: 2623,
      IsData: false,
   }, {
      count: 1594,
      IsData: false,
   }, {
      count: 1430,
      IsData: false,
   }, {
      count: 3212,
      IsData: false,
   }, {
      count: 2551,
      IsData: true,
   }, {
      count: 1343,
      IsData: true,
   }, {
      count: 2113,
      IsData: true,
   }, {
      count: 1554,
      IsData: true,
   }]
}, {
   name: '燃烧室',
   quantityArr: [{
      count: 1000,
      IsData: false,
   }, {
      count: 2500,
      IsData: false,
   }, {
      count: 2000,
      IsData: false,
   }, {
      count: 1500,
      IsData: false,
   }, {
      count: 2100,
      IsData: false,
   }, {
      count: 3512,
      IsData: false,
   }, {
      count: 2351,
      IsData: true,
   }, {
      count: 1243,
      IsData: true,
   }, {
      count: 2413,
      IsData: true,
   }, {
      count: 1354,
      IsData: true,
   }]
}, {
   name: '数值模拟',
   quantityArr: [{
      count: 1300,
      IsData: false,
   }, {
      count: 2300,
      IsData: false,
   }, {
      count: 2623,
      IsData: false,
   }, {
      count: 1594,
      IsData: false,
   }, {
      count: 1430,
      IsData: false,
   }, {
      count: 2212,
      IsData: false,
   }, {
      count: 2551,
      IsData: true,
   }, {
      count: 1343,
      IsData: true,
   }, {
      count: 2113,
      IsData: true,
   }, {
      count: 1554,
      IsData: true,
   }]
}, {
   name: 'aero-engine',
   quantityArr: [{
      count: 1000,
      IsData: false,
   }, {
      count: 2500,
      IsData: false,
   }, {
      count: 2000,
      IsData: false,
   }, {
      count: 1500,
      IsData: false,
   }, {
      count: 2100,
      IsData: false,
   }, {
      count: 3512,
      IsData: false,
   }, {
      count: 2351,
      IsData: true,
   }, {
      count: 1243,
      IsData: true,
   }, {
      count: 2413,
      IsData: false,
   }, {
      count: 1354,
      IsData: true,
   }]
}]
var nameArrs = []
var dataList = []
data.forEach(item => {
   nameArrs.push(item.name)
   item.quantityArr.forEach((res, index) => {
      dataList.push([time[index], item.name, res.count, res.IsData])
   })
})
option = {
   tooltip: {
      trigger: 'item',
      formatter: function (params) {
         var revealContent = `${params.data[1]}：${params.data[2]}，${params.data[3] ? '预测值' : '实际值'}`
         return revealContent
      }
   },
   // 控制左侧内容超出需要隐藏点点点
   yAxis: {
      data: nameArrs,
      axisLabel: {
         formatter: function (params) {
            var val = "";
            if (params.length > 5) {
               val = params.substr(0, 5) + '...';
               return val;
            } else {
               return params;
            }
         },
         textStyle: {
            color: '#000', // 字体颜色  
            fontWeight: 'bold', // 字体加粗  
            fontSize: 14 // 字体大小
         }
      }
   },
   xAxis: {
      data: time,
   },
   series: [{
      name: '',
      type: 'scatter',
      symbol: 'circle',
      symbolSize: function (val) {
         // 根据val（当前数据项的值）计算并返回散点大小  
         return val[2] / 70;
      },
      itemStyle: {
         normal: {
            color: function (data) {
               return data.data[3] ? '#A0CFFF' : '#409EFF';
            },
         },
      },
      data: dataList,
   }],
};