const chartDom = document.getElementById('main');
const myChart = echarts.init(chartDom);
const option = { /* 图表配置 */ };
myChart.setOption(option);

const option = {
  title: {            // 标题组件
    text: '主标题',
    subtext: '副标题',
    left: 'center'    // 可选：left, right, center, 数值px
  },
  tooltip: {          // 提示框
    trigger: 'axis'   // item（每个点）或 axis（整条轴线）
  },
  legend: {           // 图例
    data: ['销量'],   // 要与 series.name 对应
    top: 'top'
  },
  toolbox: {          // 工具栏，提供保存、切图、缩放等功能
    feature: {
      saveAsImage: {},   // 保存为图片
      restore: {},       // 还原
      dataView: {},      // 查看数据
      magicType: { type: ['line', 'bar'] } // 图表类型切换
    }
  },
  grid: {             // 网格位置（图表边距）
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',       //类目轴 这里是离散型 还有time时间轴,log对数轴
    boundaryGap: true,       //会让坐标轴左右两边留白，让柱子不贴边
    data: ['周一', '周二', '周三', '周四', '周五']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '销量',
      type: 'bar',
      data: [120, 200, 150, 80, 70],
      itemStyle: {
        color: '#3398DB'  // 柱子颜色
      },
      label: {
        show: true,
        position: 'top'   // 标签位置
      }
    }
  ]
};

const option = {
  title: { text: '网站访问量趋势' },
  tooltip: { trigger: 'axis' },
  xAxis: {
    type: 'category',
    data: ['一月', '二月', '三月', '四月']
  },
  yAxis: { type: 'value' },
  series: [{
    name: '访问量',
    type: 'line',
    data: [820, 932, 901, 934],
    smooth: true,
    label: { show: true },
    areaStyle: {}, // 显示面积图
    itemStyle: {
      color: '#FF7F50'
    }
  }]
};

const option = {
  title: { text: '浏览器占比', left: 'center' },
  tooltip: { trigger: 'item' },
  legend: { bottom: 10 },
  series: [{
    name: '占比',
    type: 'pie',
    radius: '60%',
    data: [
      { value: 40, name: 'Chrome' },
      { value: 30, name: 'Firefox' },
      { value: 20, name: 'Safari' },
      { value: 10, name: '其他' }
    ],
    emphasis: {
      itemStyle: {
        shadowBlur: 10,
        shadowOffsetX: 0,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
      }
    }
  }]
};

const option = {
  tooltip: { trigger: 'axis' },
  legend: { data: ['邮件营销', '联盟广告', '视频广告'] },
  xAxis: { type: 'category', data: ['周一', '周二', '周三', '周四'] },
  yAxis: { type: 'value' },
  series: [
    {
      name: '邮件营销',
      type: 'bar',
      stack: '总量',
      data: [120, 132, 101, 134]
    },
    {
      name: '联盟广告',
      type: 'bar',
      stack: '总量',
      data: [220, 182, 191, 234]
    },
    {
      name: '视频广告',
      type: 'bar',
      stack: '总量',
      data: [150, 232, 201, 154]
    }
  ]
};

window.addEventListener('resize', () => {
  myChart.resize();
});

// 动态更新数据
setTimeout(() => {
  myChart.setOption({
    series: [{
      data: [300, 500, 600, 400]
    }]
  });
}, 2000);