616 ECharts 入门案例：销售柱状图，进阶案例：多 ECharts 实例

ECharts 入门

入门案例：销售柱状图

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.min.js"></script>
    <style>
      #chart {
         800px;
        height: 400px;
      }
    </style>
  </head>
  <body>
    <div id="chart"></div>
    <script>
      const chartDom = document.getElementById('chart')
      const chart = echarts.init(chartDom)
      chart.setOption({
        title: {
          text: '快速入门ECharts开发'
        },
        xAxis: {
          data: ['食品', '数码', '服饰', '箱包']
        },
        yAxis: {},
        series: {
          type: 'bar',
          data: [100, 120, 90, 150]
        }
      })
    </script>
  </body>
</html>

思考：ECharts 的绘图流程是怎样的？

  1. 引入 js 库
  2. 编写渲染容器 DOM，添加 width 和 height 样式属性
  3. 获取渲染 DOM 对象
  4. 初始化 ECharts 对象
  5. 编写 option 参数
  6. 调用 setOption 完成渲染

test-echarts.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.js"></script>
  <style>
    #chart {
       800px;
      height: 400px;
    }
  </style>

  <script>
    // 路径：文档 --> 教程 --> ECharts 中的样式简介 --> 颜色主题（Theme --> 选择方案 --> 点击基本配置，修改配置 --> 下载主题 --> 点击复制，把js代码复制到<script><script>中 --> 在echarts.init添加第二个参数为刚刚生成的主题色 --> 
    (function (root, factory) {
      if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(['exports', 'echarts'], factory);
      } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
        // CommonJS
        factory(exports, require('echarts'));
      } else {
        // Browser globals
        factory({}, root.echarts);
      }
    }(this, function (exports, echarts) {
      var log = function (msg) {
        if (typeof console !== 'undefined') {
          console && console.error && console.error(msg);
        }
      };
      if (!echarts) {
        log('ECharts is not Loaded');
        return;
      }
      echarts.registerTheme('westeros', {
        "color": [
          "#516b91",
          "#59c4e6",
          "#edafda",
          "#93b7e3",
          "#a5e7f0",
          "#cbb0e3"
        ],
        "backgroundColor": "rgba(0,0,0,0)",
        "textStyle": {},
        "title": {
          "textStyle": {
            "color": "#516b91"
          },
          "subtextStyle": {
            "color": "#93b7e3"
          }
        },
        "line": {
          "itemStyle": {
            "normal": {
              "borderWidth": "2"
            }
          },
          "lineStyle": {
            "normal": {
              "width": "2"
            }
          },
          "symbolSize": "6",
          "symbol": "emptyCircle",
          "smooth": true
        },
        "radar": {
          "itemStyle": {
            "normal": {
              "borderWidth": "2"
            }
          },
          "lineStyle": {
            "normal": {
              "width": "2"
            }
          },
          "symbolSize": "6",
          "symbol": "emptyCircle",
          "smooth": true
        },
        "bar": {
          "itemStyle": {
            "normal": {
              "barBorderWidth": 0,
              "barBorderColor": "#ccc"
            },
            "emphasis": {
              "barBorderWidth": 0,
              "barBorderColor": "#ccc"
            }
          }
        },
        "pie": {
          "itemStyle": {
            "normal": {
              "borderWidth": 0,
              "borderColor": "#ccc"
            },
            "emphasis": {
              "borderWidth": 0,
              "borderColor": "#ccc"
            }
          }
        },
        "scatter": {
          "itemStyle": {
            "normal": {
              "borderWidth": 0,
              "borderColor": "#ccc"
            },
            "emphasis": {
              "borderWidth": 0,
              "borderColor": "#ccc"
            }
          }
        },
        "boxplot": {
          "itemStyle": {
            "normal": {
              "borderWidth": 0,
              "borderColor": "#ccc"
            },
            "emphasis": {
              "borderWidth": 0,
              "borderColor": "#ccc"
            }
          }
        },
        "parallel": {
          "itemStyle": {
            "normal": {
              "borderWidth": 0,
              "borderColor": "#ccc"
            },
            "emphasis": {
              "borderWidth": 0,
              "borderColor": "#ccc"
            }
          }
        },
        "sankey": {
          "itemStyle": {
            "normal": {
              "borderWidth": 0,
              "borderColor": "#ccc"
            },
            "emphasis": {
              "borderWidth": 0,
              "borderColor": "#ccc"
            }
          }
        },
        "funnel": {
          "itemStyle": {
            "normal": {
              "borderWidth": 0,
              "borderColor": "#ccc"
            },
            "emphasis": {
              "borderWidth": 0,
              "borderColor": "#ccc"
            }
          }
        },
        "gauge": {
          "itemStyle": {
            "normal": {
              "borderWidth": 0,
              "borderColor": "#ccc"
            },
            "emphasis": {
              "borderWidth": 0,
              "borderColor": "#ccc"
            }
          }
        },
        "candlestick": {
          "itemStyle": {
            "normal": {
              "color": "#edafda",
              "color0": "transparent",
              "borderColor": "#d680bc",
              "borderColor0": "#8fd3e8",
              "borderWidth": "2"
            }
          }
        },
        "graph": {
          "itemStyle": {
            "normal": {
              "borderWidth": 0,
              "borderColor": "#ccc"
            }
          },
          "lineStyle": {
            "normal": {
              "width": 1,
              "color": "#aaaaaa"
            }
          },
          "symbolSize": "6",
          "symbol": "emptyCircle",
          "smooth": true,
          "color": [
            "#516b91",
            "#59c4e6",
            "#edafda",
            "#93b7e3",
            "#a5e7f0",
            "#cbb0e3"
          ],
          "label": {
            "normal": {
              "textStyle": {
                "color": "#eeeeee"
              }
            }
          }
        },
        "map": {
          "itemStyle": {
            "normal": {
              "areaColor": "#f3f3f3",
              "borderColor": "#516b91",
              "borderWidth": 0.5
            },
            "emphasis": {
              "areaColor": "#a5e7f0",
              "borderColor": "#516b91",
              "borderWidth": 1
            }
          },
          "label": {
            "normal": {
              "textStyle": {
                "color": "#000"
              }
            },
            "emphasis": {
              "textStyle": {
                "color": "#516b91"
              }
            }
          }
        },
        "geo": {
          "itemStyle": {
            "normal": {
              "areaColor": "#f3f3f3",
              "borderColor": "#516b91",
              "borderWidth": 0.5
            },
            "emphasis": {
              "areaColor": "#a5e7f0",
              "borderColor": "#516b91",
              "borderWidth": 1
            }
          },
          "label": {
            "normal": {
              "textStyle": {
                "color": "#000"
              }
            },
            "emphasis": {
              "textStyle": {
                "color": "#516b91"
              }
            }
          }
        },
        "categoryAxis": {
          "axisLine": {
            "show": true,
            "lineStyle": {
              "color": "#cccccc"
            }
          },
          "axisTick": {
            "show": false,
            "lineStyle": {
              "color": "#333"
            }
          },
          "axisLabel": {
            "show": true,
            "textStyle": {
              "color": "#999999"
            }
          },
          "splitLine": {
            "show": true,
            "lineStyle": {
              "color": [
                "#eeeeee"
              ]
            }
          },
          "splitArea": {
            "show": false,
            "areaStyle": {
              "color": [
                "rgba(250,250,250,0.05)",
                "rgba(200,200,200,0.02)"
              ]
            }
          }
        },
        "valueAxis": {
          "axisLine": {
            "show": true,
            "lineStyle": {
              "color": "#cccccc"
            }
          },
          "axisTick": {
            "show": false,
            "lineStyle": {
              "color": "#333"
            }
          },
          "axisLabel": {
            "show": true,
            "textStyle": {
              "color": "#999999"
            }
          },
          "splitLine": {
            "show": true,
            "lineStyle": {
              "color": [
                "#eeeeee"
              ]
            }
          },
          "splitArea": {
            "show": false,
            "areaStyle": {
              "color": [
                "rgba(250,250,250,0.05)",
                "rgba(200,200,200,0.02)"
              ]
            }
          }
        },
        "logAxis": {
          "axisLine": {
            "show": true,
            "lineStyle": {
              "color": "#cccccc"
            }
          },
          "axisTick": {
            "show": false,
            "lineStyle": {
              "color": "#333"
            }
          },
          "axisLabel": {
            "show": true,
            "textStyle": {
              "color": "#999999"
            }
          },
          "splitLine": {
            "show": true,
            "lineStyle": {
              "color": [
                "#eeeeee"
              ]
            }
          },
          "splitArea": {
            "show": false,
            "areaStyle": {
              "color": [
                "rgba(250,250,250,0.05)",
                "rgba(200,200,200,0.02)"
              ]
            }
          }
        },
        "timeAxis": {
          "axisLine": {
            "show": true,
            "lineStyle": {
              "color": "#cccccc"
            }
          },
          "axisTick": {
            "show": false,
            "lineStyle": {
              "color": "#333"
            }
          },
          "axisLabel": {
            "show": true,
            "textStyle": {
              "color": "#999999"
            }
          },
          "splitLine": {
            "show": true,
            "lineStyle": {
              "color": [
                "#eeeeee"
              ]
            }
          },
          "splitArea": {
            "show": false,
            "areaStyle": {
              "color": [
                "rgba(250,250,250,0.05)",
                "rgba(200,200,200,0.02)"
              ]
            }
          }
        },
        "toolbox": {
          "iconStyle": {
            "normal": {
              "borderColor": "#999999"
            },
            "emphasis": {
              "borderColor": "#666666"
            }
          }
        },
        "legend": {
          "textStyle": {
            "color": "#999999"
          }
        },
        "tooltip": {
          "axisPointer": {
            "lineStyle": {
              "color": "#cccccc",
              "width": 1
            },
            "crossStyle": {
              "color": "#cccccc",
              "width": 1
            }
          }
        },
        "timeline": {
          "lineStyle": {
            "color": "#8fd3e8",
            "width": 1
          },
          "itemStyle": {
            "normal": {
              "color": "#8fd3e8",
              "borderWidth": 1
            },
            "emphasis": {
              "color": "#8fd3e8"
            }
          },
          "controlStyle": {
            "normal": {
              "color": "#8fd3e8",
              "borderColor": "#8fd3e8",
              "borderWidth": 0.5
            },
            "emphasis": {
              "color": "#8fd3e8",
              "borderColor": "#8fd3e8",
              "borderWidth": 0.5
            }
          },
          "checkpointStyle": {
            "color": "#8fd3e8",
            "borderColor": "rgba(138,124,168,0.37)"
          },
          "label": {
            "normal": {
              "textStyle": {
                "color": "#8fd3e8"
              }
            },
            "emphasis": {
              "textStyle": {
                "color": "#8fd3e8"
              }
            }
          }
        },
        "visualMap": {
          "color": [
            "#516b91",
            "#59c4e6",
            "#a5e7f0"
          ]
        },
        "dataZoom": {
          "backgroundColor": "rgba(0,0,0,0)",
          "dataBackgroundColor": "rgba(255,255,255,0.3)",
          "fillerColor": "rgba(167,183,204,0.4)",
          "handleColor": "#a7b7cc",
          "handleSize": "100%",
          "textStyle": {
            "color": "#333333"
          }
        },
        "markPoint": {
          "label": {
            "normal": {
              "textStyle": {
                "color": "#eeeeee"
              }
            },
            "emphasis": {
              "textStyle": {
                "color": "#eeeeee"
              }
            }
          }
        }
      });
    }));
  </script>
</head>

<body>
  <div id="chart"></div>

  <script>
    const chartDom = document.getElementById('chart');
    // 1、引入echarts.js后，会生成全局的echarts类；2、参数二：主题的文本，参数三：渲染成svg
    const chart = echarts.init(chartDom, 'westeros', { renderer: 'svg' });

    // 不是setOptions，没有s
    chart.setOption({
      title: {
        text: 'ECharts 入门案例'
      },
      // 渲染一个图表，至少需要添加3个元素
      // x轴
      xAxis: {
        data: ['食品', '数码', '服饰', '箱包']
      },
      // y轴，没有数据，也要写上
      yAxis: {},
      // 数据、图表类型
      series: {
        type: 'bar', // 使用柱状图
        data: [100, 120, 90, 150] // 一次对应xAxis.data的每一项
      }
    });
  </script>
</body>

</html>

进阶案例：多 ECharts 实例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.min.js"></script>
    <style>
      #chart {
         800px;
        height: 300px;
      }
      #chart2 {
         800px;
        height: 300px;
      }
    </style>
  </head>
  <body>
    <div>这是第一个 echarts 图表</div>
    <div id="chart"></div>
    <div>这是第二个 echarts 图表</div>
    <div id="chart2"></div>
    <script>
      const chartDom = document.getElementById('chart')
      const chartDom2 = document.getElementById('chart2')
      const chart = echarts.init(chartDom)
      const chart2 = echarts.init(chartDom2)
      const option1 = {
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line',
          areaStyle: {}
        }]
      };
      const option2 = {
        legend: {
          data: ['高度(km)与气温(°C)变化关系']
        },
        tooltip: {
          trigger: 'axis',
          formatter: 'Temperature : <br/>{b}km : {c}°C'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value} °C'
          }
        },
        yAxis: {
          type: 'category',
          axisLine: {onZero: false},
          axisLabel: {
            formatter: '{value} km'
          },
          boundaryGap: false,
          data: ['0', '10', '20', '30', '40', '50', '60', '70', '80']
        },
        series: [{
          name: '高度(km)与气温(°C)变化关系',
          type: 'line',
          smooth: true,
          lineStyle: {
             3,
            shadowColor: 'rgba(0,0,0,0.4)',
            shadowBlur: 10,
            shadowOffsetY: 10
          },
          data:[15, -50, -56.5, -46.5, -22.1, -2.5, -27.7, -55.7, -76.5]
        }]
      }
      chart.setOption(option1)
      chart2.setOption(option2)
    </script>
  </body>
</html>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/jianjie/p/14412301.html