echarts双柱状图

好的，关于echarts双柱状图，你可以参考以下代码实现：

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    tooltip: {},
    legend: {
        data:['销量', '利润']
    },
    xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    },{
        name: '利润',
        type: 'bar',
        data: [2, 10, 18, 4, 5, 10]
    }]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

相关问题

echarts双柱状图点击事件

echarts双柱状图的点击事件可以通过以下步骤来实现：

1. 首先，在echarts的配置项中，需要将图表的series项中的每个柱子设置为可点击的图形。可以使用itemStyle属性的emphasis属性来实现，如下所示：

   series: [
     {
       type: 'bar',
       data: [/*数据*/],
       itemStyle: {
         emphasis: {
           opacity: 1,
           color: 'rgba(0,0,0,0.5)' // 设置点击后的颜色
         },
       },
     },
     // 其他柱子的配置
   ]

2. 然后，需要在echarts实例中添加一个点击事件的监听器，当柱子被点击时触发相应的操作。可以使用echarts的on方法来实现，如下所示：

   myChart.on('click', function(params) {
     // 在这里处理点击事件，params中包含了点击的柱子的信息
     console.log(params);
   });

这样，当双柱状图中的柱子被点击时，点击事件就会触发，并且可以在处理函数中获取到柱子的信息。

vue2 使用echarts 双柱状图

在 Vue 2 中使用 ECharts 绘制双柱状图的步骤如下：

1. 首先，安装 ECharts：

   npm install echarts

2. 在 Vue 组件中引入 ECharts 和主题文件：

   import echarts from 'echarts'
   import 'echarts/theme/macarons.js'

3. 在 Vue 组件的 `mounted` 钩子函数中初始化图表并绘制双柱状图：

   mounted() {
     // 初始化图表
     this.chart = echarts.init(this.$refs.chart, 'macarons');
     
     // 设置图表配置项
     const options = {
       title: {
         text: '双柱状图示例'
       },
       legend: {
         data: ['柱状图1', '柱状图2']
       },
       xAxis: {
         data: ['类别1', '类别2', '类别3', '类别4', '类别5']
       },
       yAxis: {},
       series: [
         {
           name: '柱状图1',
           type: 'bar',
           data: [10, 20, 30, 40, 50]
         },
         {
           name: '柱状图2',
           type: 'bar',
           data: [20, 30, 40, 50, 60]
         }
       ]
     };
     
     // 渲染图表
     this.chart.setOption(options);
   }

4. 在 Vue 模板中添加一个容器元素来展示图表：

   <template>
     <div ref="chart" style="width: 100%; height: 400px;"></div>
   </template>

这样，你就可以在 Vue 2 中使用 ECharts 绘制双柱状图了。记得在适当的时候销毁图表实例，以释放资源：

beforeDestroy() {
  if (this.chart) {
    this.chart.dispose();
    this.chart = null;
  }
}