function weeklyCharts(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // new
  });
  canvas.setChart(chart);
  let XData = ['道里区','南岗区','道外区','香坊区','松北区','平房区']
  let valueData = {
      jfsbs: [805,860,400,400,400,400],
      md: [300,390,290,285,290,288],
      znhbl: [95,78,50,60,85,78],
  }
  var option = {
    backgroundColor: '#fff',
    grid: {
        left: '2%',
        right: '4%',
        bottom: '14%',
        top:'16%',
        containLabel: true
    },
    legend: {
      bottom:"1%",
      itemWidth: 10,
      itemHeight: 10,
      formatter: ['{a|{name}}'].join('\n'),
      textStyle: {
        fontSize: 10,
        color: '#666666',
        height: 8,
        rich: {
          a: {
            verticalAlign: 'bottom',
          },
        },
      },
    },
    dataZoom: [{
      start:10,
      end:20
    }],
    xAxis: {
      type: 'category',
      data: XData,
      axisLine: {
        lineStyle: {
            color: '#cdd5e2'
        }
      },
      axisLabel: {
        textStyle: {
            color: "#666666"
        }
      },
    },
    yAxis: [{
        type: 'value',
        axisLabel: {                
            textStyle: {
                color: "#666666"
            }}    ,
        axisLine: {
            lineStyle: {
                color: '#cdd5e2'
            }
        },
        splitLine: {
            show: true,
            lineStyle: {
                color: 'rgba(193, 207, 220, 1)'
            }
        },
      },
      {
        type: "value",
        nameTextStyle: {
            color: "#666666"
        },
        position: "right",
        axisLine: {
            lineStyle: {
                color: '#cdd5e2'
            }
        },
        splitLine: {
            show: false,
        },
        axisLabel: {
            show: true,
            formatter: "{value} ", //右侧Y轴文字显示
            textStyle: {
                color: "#666666"
            }
        }
      }
    ],


    series: [{
        name: '供应面积（万m²）',
        type: 'bar',
        barWidth: '12px',
        label: {
            show: true,
            position: "top",
          },
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(123, 200, 255, 1)'
            }, {
                offset: 1,
                color: 'rgba(53, 157, 245, 1)'
            }]),
            barBorderRadius: 6,
          }
        },
        data: valueData.jfsbs
      },
      {
        name: '成交面积（万m²）',
        type: 'bar',
        barWidth: '12px',
        label: {
          show: true,
          position: "top",
        },
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(171, 218, 83, 1)'
            }, {
                offset: 1,
                color: 'rgba(132, 186, 27, 1)'
            }]),
            barBorderRadius: 6,
          }
        },
        data: valueData.md
        },{
          name: "均价（元/m²）",
          type: "line",
          label: {
              show: true,
              position: "top",
          },
          yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
          smooth: false, //平滑曲线显示
          symbol: "emptycircle", //标记的图形为实心圆
          symbolSize: 9, //标记的大小
          itemStyle: {
            normal: {
              color: 'rgba(255, 119, 74, 1)',
              borderColor: 'rgba(255, 119, 74, 1)',  //圆点透明 边框
              borderWidth: 2
            },
          },
          lineStyle: {
              color: "RGBA(255, 131, 90, 0.9)"
          },
          data: valueData.znhbl
        }
    ]
  };
  chart.setOption(option);
  return chart;
}
GitHub账号

选择需要上架的开放服务

案例类型
