将代码中的柱状图和折线图的颜色改成不一样的,可以通过修改series中的itemStyle属性来实现。具体代码如下:

this.define("load3", function () {
  o2.load(echartUrl, function () {
    // 基于准备好的dom,初始化echarts实例
    var mySale = echarts.init(document.getElementById('sale'));

    // 指定图表的配置项和数据
    var data = [
      { date: '2021-01-01', orders: 100 },
      { date: '2021-01-02', orders: 150 },
      { date: '2021-01-03', orders: 120 },
      { date: '2021-01-04', orders: 180 },
      { date: '2021-01-05', orders: 200 },
      { date: '2021-01-06', orders: 160 },
      { date: '2021-01-07', orders: 220 }
    ];

    // 配置项
    var option = {
      title: {
        text: '食堂订单数量变化图'
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['订单数量']
      },
      xAxis: {
        data: data.map(item => item.date)
      },
      yAxis: [
        {
          type: 'value',
          name: '订单数量',
          min: 0,
          max: Math.max(...data.map(item => item.orders)) + 50,
          axisLabel: {
            formatter: '{value} 个'
          }
        }
      ],
      series: [
        {
          name: '订单数量',
          type: 'bar',
          itemStyle: {
            color: 'blue' // 修改柱状图的颜色
          },
          data: data.map(item => item.orders)
        },
        {
          name: '订单数量',
          type: 'line',
          itemStyle: {
            color: 'red' // 修改折线图的颜色
          },
          data: data.map(item => item.orders)
        }
      ]
    };
    // 使用刚指定的配置项和数据显示图表。
    mySale.setOption(option);
  }.bind(this));
});
``
把下面代码柱子颜色改成不一样的并给出代码thisdefineload3 function o2loadechartUrl function 基于准备好的dom初始化echarts实例 var mySale = echartsinitdocumentgetElementByIdsale; 指定图表的配置项和数据 var data = date 20

原文地址: http://www.cveoy.top/t/topic/ieUl 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录