echarts柱状图示例(整理)

简介: echarts柱状图示例(整理)
<!DOCTYPE html>
<html style="height: 100%">
    <head>
        <meta charset="utf-8">
    </head>
    <body style="height: 100%; margin: 0">
        <div id="containerZ" style="height: 340px"></div>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
        <script type="text/javascript">
      var domZ = document.getElementById("containerZ");
      var myChartZ = echarts.init(domZ);
      var app = {};
      var optionZ;
      optionZ = {
        title: {
          text: '折线图堆叠',
          left: '10%' //可以定义
        },
        legend: {
          right: '10%'
        },
        tooltip: {},
        dataset: {
          dimensions: ['product', '任务总金额', '服务总金额'],
          source: [
            {product: '江西分平台', '任务总金额': 43.3, '服务总金额': 93.7},
            {product: '湖南分平台', '任务总金额': 83.1, '服务总金额': 55.1},
            {product: '莱西分平台', '任务总金额': 86.4, '服务总金额': 82.5},
          ]
        },
        xAxis: {type: 'category'},
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          {
            type: 'bar',
            color: '#169687'  //可以改变颜色
          },
          {
            type: 'bar',
            color: '#FCB72B'  //可以改变颜色
          }
        ]
      };
      if (optionZ && typeof optionZ === 'object') {
        myChartZ.setOption(optionZ);
      }
        </script>
    </body>
</html>

相关文章
|
2月前
echarts 柱状图/折线图x轴坐标间隔
echarts 柱状图/折线图x轴坐标间隔
52 0
|
12天前
|
JavaScript Apache 容器
如何使用ECharts制作一个简单的柱状图
如何使用ECharts制作一个简单的柱状图
18 0
|
2月前
设置echarts的grid、tooltip、柱状图渐变色、折线图渐变色
设置echarts的grid、tooltip、柱状图渐变色、折线图渐变色
|
2月前
Echarts柱状图x轴刻度间隔显示不全/x轴文字倾斜
Echarts柱状图x轴刻度间隔显示不全/x轴文字倾斜
215 0
|
7月前
Echarts 柱状图添加标记 最大值 最小值 平均值
Echarts 柱状图添加标记 最大值 最小值 平均值
|
7月前
|
容器
Echarts 最简单创建柱状图
Echarts 最简单创建柱状图
|
8月前
|
JSON 数据可视化 JavaScript
vue+echarts实现一个叠堆柱状图
vue+echarts实现一个叠堆柱状图
65 0
|
8月前
关于Echarts柱状图监听点击事件的实现方法
关于Echarts柱状图监听点击事件的实现方法
149 0
|
8月前
|
JSON 数据格式
Echarts+ajax实现叠堆柱状图
Echarts+ajax实现叠堆柱状图
38 0
|
8月前
Echarts柱状图折线图混合使用
Echarts柱状图折线图混合使用
75 0