WebMan テクノロジーを使用してデータ視覚化分析を行う方法

<script src="https://www.webmantech.com/echarts.js"></script>

// 获取数据
var data = [
  { name: '类别一', value: 100 },
  { name: '类别二', value: 200 },
  { name: '类别三', value: 300 }
];

// 创建图表实例
var myChart = echarts.init(document.getElementById('chartContainer'));

// 配置图表
var option = {
  title: {
    text: '销售数据柱状图'
  },
  xAxis: {
    type: 'category',
    data: data.map(function (item) {
      return item.name;
    })
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      type: 'bar',
      data: data.map(function (item) {
        return item.value;
      })
    }
  ]
};

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

// 假设数据已经通过接口获取到
var rawData = [
  { name: '类别一', sales: 100, quantity: 50 },
  { name: '类别二', sales: 200, quantity: 100 },
  { name: '类别三', sales: 300, quantity: 150 }
];

// 数据处理
var processedData = rawData.map(function (item) {
  return {
    name: item.name,
    value: item.sales,
    quantity: item.quantity
  };
});

// 创建图表实例
var myChart = echarts.init(document.getElementById('chartContainer'));

// 配置图表
var option = {
  tooltip: {},
  legend: {
    data: ['销售额', '销售数量']
  },
  xAxis: {
    data: processedData.map(function (item) {
      return item.name;
    })
  },
  yAxis: {},
  series: [
    {
      name: '销售额',
      type: 'bar',
      data: processedData.map(function (item) {
        return item.value;
      })
    },
    {
      name: '销售数量',
      type: 'bar',
      data: processedData.map(function (item) {
        return item.quantity;
      })
    }
  ]
};

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