数据可视化echarts实现以下瀑布图，并自定义title样式。

在代码里下毒

已于 2024-06-05 08:52:20 修改

阅读量1.5k

点赞数

文章标签： javascript visual studio code 数据分析

于 2022-03-24 15:49:51 首次发布

本文链接：https://blog.csdn.net/qq_46011557/article/details/123713033

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="echarts.js"></script>
</head>
<body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));

        var option = {
  title: {
          text: '不同城市消费总金额（单位：元）',
          show: true,  
          target: "blank", 
          subtarget: "white",  
          textAlign: "center",  
          textBaseline: "top",  
          padding: 5,  
          itemGap: 10,  
          zlevel: 0,
          z: 2,  
          left: "50%",  
          top: "10",  
          right: "auto",  
          bottom: "auto",  
          backgroundColor: "#FFC1C1",  
          borderColor: "##9400D3", 
          borderWidth: 2,  
          shadowColor: "black",  
          shadowOffsetX: 8,  
          shadowOffsetY: 8,  
          shadowBlur: 10  
   },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    },
  },
  legend: {
            data: ['生活费'],
            left:'right'
            },
  toolbox:{
    show:true,
    feature:{
      mark:{show: true },
      dataView: {show: true,readOnly: false },
      restore:{ show: true },
      saveAsImage: { show: true }
    },
    x:'right',
    y:'center',
    orient:'vertical'
  },
    

  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    splitLine: { show: false },
    data: ['广州', '佛山', '深圳', '东莞']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '辅助',
      type: 'bar',
      stack: 'Total',
      itemStyle: {
        borderColor: 'transparent',
        color: 'transparent'
      },
      emphasis: {
        itemStyle: {
          borderColor: 'transparent',
          color: 'transparent'
        }
      },
      data: [0,801,1094,635]
    },
    {
      name: '生活费',
      type: 'bar',
      stack: 'Total',
      label: {
        show: true,
        position: 'inside'
      },
      data: [3076,2275,1181,546],
      color:"#F4A460",
    }
  ]
};
        myChart.setOption(option);
    </script>
</body>
</html>