ECharts 图表教程

<!-- 第1步：引入 ECharts -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>

<!-- 第2步：准备一个有宽高的容器 -->
<div id="chart" style="width:600px;height:400px"></div>

<!-- 第3步：写 JS 初始化图表 -->
<script>
  var chart = echarts.init(document.getElementById('chart'));
  chart.setOption({
    title: { text: '我的第一个图表' },
    xAxis: { data: ['A','B','C'] },
    yAxis: {},
    series: [{ type: 'bar', data: [120, 200, 150] }]
  });
</script>

<div id="bar-chart" style="width:700px;height:400px"></div>
<script>
  var barChart = echarts.init(document.getElementById('bar-chart'));
  barChart.setOption({
    title: { text: '各产线 OEE 对比 (%)' },
    tooltip: {},
    xAxis: {
      type: 'category',
      data: ['Line-1', 'Line-2', 'Line-3', 'Line-4', 'Line-5']
    },
    yAxis: {
      type: 'value',
      max: 100,
      axisLabel: { formatter: '{value}%' }
    },
    series: [{
      type: 'bar',
      data: [85.2, 78.6, 91.3, 72.8, 88.1],
      itemStyle: {
        color: function(params) {
          // OEE < 80% 标红，>= 80% 标蓝
          return params.data < 80 ? '#ee6666' : '#5470c6';
        }
      },
      label: { show: true, position: 'top', formatter: '{c}%' }
    }]
  });
</script>

<div id="line-chart" style="width:700px;height:400px"></div>
<script>
  var lineChart = echarts.init(document.getElementById('line-chart'));
  var hours = [];
  for (var i = 0; i < 24; i++) hours.push(i + ':00');

  lineChart.setOption({
    title: { text: '24 小时产量趋势（单位：件）' },
    tooltip: { trigger: 'axis' },
    xAxis: { type: 'category', data: hours },
    yAxis: { type: 'value' },
    series: [{
      type: 'line',
      data: [120,98,85,72,65,58,62,180,245,268,
             290,310,305,298,285,275,280,265,248,230,
             210,195,175,150],
      smooth: true,         // 平滑曲线（像 Excel 里的"平滑线"）
      areaStyle: {           // 填充线下面的区域
        color: new echarts.graphic.LinearGradient(0,0,0,1,[
          { offset: 0, color: 'rgba(84,112,198,0.4)' },
          { offset: 1, color: 'rgba(84,112,198,0.05)' }
        ])
      },
      markLine: {            // 添加目标线（类似 Excel 的参考线）
        data: [{ yAxis: 250, name: '目标产量' }]
      }
    }]
  });
</script>

<div id="pie-chart" style="width:700px;height:400px"></div>
<script>
  var pieChart = echarts.init(document.getElementById('pie-chart'));
  pieChart.setOption({
    title: { text: '停机原因分布', left: 'center' },
    tooltip: { trigger: 'item', formatter: '{b}: {c}分钟 ({d}%)' },
    legend: { bottom: 10 },
    series: [{
      type: 'pie',
      radius: ['40%', '70%'],   // 内半径40%，外半径70% → 环形图（甜甜圈）
      data: [
        { value: 180, name: '设备故障' },
        { value: 130, name: '换线调整' },
        { value: 95,  name: '缺料等待' },
        { value: 60,  name: '人员不足' },
        { value: 45,  name: '计划停机' },
        { value: 30,  name: '其他' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0,0,0,0.3)'
        }
      }
    }]
  });
</script>

<div id="gauge-chart" style="width:600px;height:400px"></div>
<script>
  var gaugeChart = echarts.init(document.getElementById('gauge-chart'));
  gaugeChart.setOption({
    series: [{
      type: 'gauge',
      center: ['50%', '60%'],
      min: 0,
      max: 100,
      splitNumber: 10,
      axisLine: {
        lineStyle: {
          width: 20,
          color: [
            [0.6, '#ee6666'],   // 0~60% 红色（差）
            [0.8, '#fac858'],   // 60~80% 黄色（一般）
            [1,   '#91cc75']    // 80~100% 绿色（优秀）
          ]
        }
      },
      pointer: { width: 5 },
      axisTick: { length: 8 },
      splitLine: { length: 15 },
      detail: {
        formatter: '{value}%',
        fontSize: 28,
        offsetCenter: [0, '70%'],
        color: 'auto'     // 数字颜色跟随区间颜色
      },
      title: {
        offsetCenter: [0, '90%'],
        fontSize: 16
      },
      data: [{ value: 78.5, name: 'OEE' }]
    }]
  });
</script>

<div id="map-chart" style="width:700px;height:400px"></div>
<script>
  var mapChart = echarts.init(document.getElementById('map-chart'));

  // 真实项目中，用 echarts.registerMap('china', chinaJson) 注册地图
  // 这里用散点图模拟各车间的位置和产量
  var workshops = [
    { name: 'A1车间', value: [50, 30, 5200] },
    { name: 'A2车间', value: [150, 50, 3800] },
    { name: 'B1车间', value: [250, 40, 6100] },
    { name: 'B2车间', value: [350, 60, 4500] },
    { name: 'C1仓库', value: [200, 120, 2000] }
  ];

  mapChart.setOption({
    title: { text: '各车间产量分布（气泡大小 = 产量）' },
    tooltip: {
      formatter: function(p) {
        return p.name + '<br/>产量：' + p.value[2] + ' 件';
      }
    },
    xAxis: { show: false, min: 0, max: 400 },
    yAxis: { show: false, min: 0, max: 150 },
    series: [{
      type: 'scatter',
      symbolSize: function(d) { return d[2] / 80; },
      data: workshops,
      label: { show: true, formatter: '{b}', position: 'bottom' },
      itemStyle: {
        color: function(p) {
          var v = p.value[2];
          return v >= 5000 ? '#5470c6' : v >= 3000 ? '#91cc75' : '#fac858';
        }
      }
    }]
  });
</script>

// 第1步：引入 ECharts 后，再引入中国地图 JSON
<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@4/map/js/china.js"></script>

// 第2步：series 用 type: 'map', map: 'china'
series: [{
  type: 'map',
  map: 'china',
  data: [
    { name: '山东', value: 57200 },
    { name: '江苏', value: 48900 }
  ]
}]

// 第3步：配合 visualMap 组件做颜色映射
visualMap: {
  min: 0, max: 60000,
  inRange: { color: ['#e0f3db', '#a8ddb5', '#43a2ca'] }
}

<div id="race-chart" style="width:700px;height:400px"></div>
<script>
  var raceChart = echarts.init(document.getElementById('race-chart'));
  var machines = ['CNC-01','CNC-02','CNC-03','CNC-04','CNC-05','CNC-06'];
  var currentData = [320, 280, 350, 260, 310, 290];
  var year = 2024;

  function update() {
    // 模拟数据变化（实际项目从 API 获取）
    currentData = currentData.map(function(v) {
      return Math.round(v + (Math.random() - 0.3) * 50);
    });
    year++;

    // 按产量排序（从大到小）
    var sorted = machines.map(function(m, i) {
      return { name: m, value: currentData[i] };
    }).sort(function(a, b) { return a.value - b.value; });

    raceChart.setOption({
      title: { text: '各机台产量动态排名 - ' + year + '年' },
      xAxis: { max: 500 },
      yAxis: {
        type: 'category',
        data: sorted.map(function(d) { return d.name; }),
        inverse: true   // 从上到下：最大在上
      },
      series: [{
        type: 'bar',
        data: sorted.map(function(d) { return d.value; }),
        label: { show: true, position: 'right' },
        itemStyle: { color: '#5470c6' }
      }],
      animationDuration: 1000,   // 过渡动画 1 秒
      animationEasing: 'cubicInOut'
    });
  }

  update();                    // 首次渲染
  setInterval(update, 2000);  // 每 2 秒更新一次
</script>

<div id="mixed-chart" style="width:700px;height:400px"></div>
<script>
  var mixedChart = echarts.init(document.getElementById('mixed-chart'));
  var days = ['周一','周二','周三','周四','周五','周六','周日'];

  mixedChart.setOption({
    title: { text: '本周产量 & 直通率' },
    tooltip: { trigger: 'axis' },
    legend: {},
    xAxis: { type: 'category', data: days },
    yAxis: [
      {
        type: 'value',
        name: '产量(件)',
        position: 'left'
      },
      {
        type: 'value',
        name: '直通率(%)',
        position: 'right',
        min: 90,
        max: 100,
        axisLabel: { formatter: '{value}%' }
      }
    ],
    series: [
      {
        name: '产量',
        type: 'bar',
        data: [1250, 1380, 1420, 1350, 1500, 1100, 980],
        itemStyle: { color: '#5470c6' }
      },
      {
        name: '直通率',
        type: 'line',
        yAxisIndex: 1,          // ⭐ 关键：用右侧 Y 轴
        data: [96.2, 95.8, 97.1, 94.5, 98.2, 96.8, 95.3],
        smooth: true,
        itemStyle: { color: '#ee6666' },
        lineStyle: { width: 3 }
      }
    ]
  });
</script>

<div id="realtime-gauge" style="width:600px;height:400px"></div>
<script>
  var rtGauge = echarts.init(document.getElementById('realtime-gauge'));
  var oee = 78.5;  // 初始值

  function renderGauge(val) {
    rtGauge.setOption({
      series: [{
        type: 'gauge',
        min: 0, max: 100,
        detail: { formatter: '{value}%', fontSize: 32 },
        axisLine: {
          lineStyle: {
            width: 20,
            color: [[0.6,'#ee6666'],[0.8,'#fac858'],[1,'#91cc75']]
          }
        },
        data: [{ value: val, name: 'OEE（实时）' }]
      }]
    });
  }

  renderGauge(oee);

  // 每 2 秒模拟 OEE 波动
  setInterval(function() {
    oee = oee + (Math.random() - 0.48) * 3;  // 小幅波动
    oee = Math.max(60, Math.min(98, oee));     // 限制在 60~98
    oee = Math.round(oee * 10) / 10;           // 保留一位小数
    renderGauge(oee);
  }, 2000);
</script>

// 高亮某个数据项（比如停机最多的设备）
chart.dispatchAction({
  type: 'highlight',
  seriesIndex: 0,
  dataIndex: 2    // 第 3 个数据项
});

// 显示 tooltip
chart.dispatchAction({
  type: 'showTip',
  seriesIndex: 0,
  dataIndex: 2
});

// 图表联动：一个图点击，另一个图跟着更新
chart1.on('click', function(params) {
  chart2.setOption({ /* 根据点击更新 */ });
});

// 方法1：监听 window resize（基础方案）
window.addEventListener('resize', function() {
  myChart.resize();
});

// 方法2：多个图表一起 resize
window.addEventListener('resize', function() {
  chart1.resize();
  chart2.resize();
  chart3.resize();
});

// 方法3：防抖 resize（推荐，避免频繁触发）
var resizeTimer;
window.addEventListener('resize', function() {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(function() {
    myChart.resize();
  }, 300);
});

// 方法4：容器自适应（CSS 方案，推荐）
// 容器用 CSS 百分比宽度，图表自动跟随
// <div id="chart" style="width:100%;height:400px"></div>

/* 大屏容器：固定设计稿尺寸，自动缩放 */
.dashboard {
  width: 1920px;
  height: 1080px;
  transform-origin: 0 0;
  position: fixed;
  top: 0;
  left: 0;
}

<script>
  // 根据窗口大小计算缩放比例
  function autoScale() {
    var scaleX = window.innerWidth / 1920;
    var scaleY = window.innerHeight / 1080;
    var scale = Math.min(scaleX, scaleY);
    document.querySelector('.dashboard').style.transform =
      'scale(' + scale + ')';
  }
  autoScale();
  window.addEventListener('resize', autoScale);
</script>

// 复制这个配置，所有图表共用
var darkTheme = {
  backgroundColor: '#0d1b2a',          // 深色背景

  color: [                            // 图表配色板
    '#00d2ff',  // 科技蓝（主色）
    '#00e676',  // 工业绿（正常/达标）
    '#ff9100',  // 警告橙（注意）
    '#ff1744',  // 报警红（异常）
    '#D2A8FF',  // 辅助紫
    '#18ffff'   // 青色辅助
  ],

  title: {
    textStyle: { color: '#e0e0e0', fontSize: 18 },
    subtextStyle: { color: '#90a4ae' }
  },

  legend: {
    textStyle: { color: '#b0bec5' }
  },

  xAxis: {
    axisLine:  { lineStyle: { color: '#37474f' } },
    axisLabel: { color: '#90a4ae' },
    splitLine: { lineStyle: { color: '#263238' } }
  },

  yAxis: {
    axisLine:  { lineStyle: { color: '#37474f' } },
    axisLabel: { color: '#90a4ae' },
    splitLine: { lineStyle: { color: '#263238' } }
  },

  tooltip: {
    backgroundColor: 'rgba(13,27,42,0.9)',
    borderColor: '#37474f',
    textStyle: { color: '#e0e0e0' }
  }
};

// 使用方式：传入 init 的第二个参数
// var chart = echarts.init(dom, darkTheme);
// 或者：chart.setOption({ ...darkTheme, series: [...] });