如何用echarts完成这个堆积柱状图

Question

 

Answer 1

// 1. 将表格数据转换为 ECharts 可以识别的数据格式
const data = [
  { name: '廊坊华盛昌广阳', value: 20 },
  { name: '东莞东风南方莞樟', value: 30 },
  { name: '江门利丰', value: 30 },
  { name: '清远金江', value: 20 },
  { name: '东莞东风南方东益', value: 20 },
  { name: '江门江沙', value: 40 },
  { name: '清远阳明山', value: 30 },
];

// 2. 创建一个 ECharts 实例
const myChart = echarts.init(document.getElementById('main'));

// 3. 设置图表类型为饼图或柱状图
const option = {
  title: {
    text: '跨区车辆售卖城市统计',
  },
  tooltip: {
    trigger: 'item',
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    data: ['销量'],
  },
  series: [
    {
      name: '销量',
      type: 'pie', // 或者 'bar'
      radius: '50%',
      data: data,
      itemStyle: {
        emphasis: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        },
      },
    },
  ],
};

// 4. 设置图表数据
myChart.setOption(option);

// 5. 渲染图表
myChart.resize();

将以上代码插入到 HTML 文件中的 <script> 标签内，并确保已经引入了 ECharts 库，这样就可以根据给定的表格数据绘制一个饼图或柱状图了。