echarts 双柱状图和折线图

ECharts（百度开源的一个数据可视化库）可以很方便地绘制双柱状图和折线图。具体步骤如下：

1. 引入 ECharts 库和主题

<!-- 引入 ECharts 库 -->
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>

<!-- 引入 ECharts 主题 -->
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/theme/macarons.js"></script>

2. 准备数据

// X 轴数据
var xData = ['一月', '二月', '三月', '四月', '五月', '六月'];

// 第一组数据（柱状图）
var yData1 = [120, 200, 150, 80, 70, 110];

// 第二组数据（柱状图）
var yData2 = [100, 180, 130, 70, 60, 100];

// 第三组数据（折线图）
var yData3 = [90, 160, 120, 60, 50, 90];

3. 配置 ECharts

// 初始化 ECharts 实例对象
var myChart = echarts.init(document.getElementById('chart'));

// 设置 ECharts 配置项
var option = {
  // 设置图表标题
  title: {
    text: '双柱状图和折线图',
    left: 'center'
  },
  // 设置图例
  legend: {
    data: ['第一组', '第二组', '第三组'],
    top: 30
  },
  // 设置 X 轴
  xAxis: {
    type: 'category',
    data: xData
  },
  // 设置 Y 轴
  yAxis: [
    {
      type: 'value',
      name: '第一组/第二组',
      axisLabel: {
        formatter: '{value} 元'
      }
    },
    {
      type: 'value',
      name: '第三组',
      axisLabel: {
        formatter: '{value} %'
      }
    }
  ],
  // 设置数据系列
  series: [
    {
      name: '第一组',
      type: 'bar',
      data: yData1
    },
    {
      name: '第二组',
      type: 'bar',
      data: yData2
    },
    {
      name: '第三组',
      type: 'line',
      yAxisIndex: 1,
      data: yData3
    }
  ],
  // 设置图表主题
  color: ['#5470c6', '#91cc75', '#fac858']
};

// 渲染图表
myChart.setOption(option);

4. 在 HTML 中创建图表容器

<div id="chart" style="width: 600px; height: 400px;"></div>

以上就是使用 ECharts 绘制双柱状图和折线图的基本步骤。可以根据实际需求调整配置项，以达到更好的可视化效果。