How to use echarts - 10 common examples

loadChart() {
    // console.log(this.chart)
    this.chartObj = echarts.init(this.chart)
    const option = {
      tooltip: {
        show: false,
      },
      grid: {
        top: '20%',
        left: '5%',
        right: '5%',
        bottom: '15%',
      },
      xAxis: {
        data: ['平均CPU\n利用率', '平均内存\n利用率', '平均硬盘\n利用率'],
        offset: 15,
        axisTick: {
          show: false,
        },

controllers.controller('HealthCtrl', ['$scope', '$http', '$config', '$location','$timeout', '$route', '$barkChart', '$rootScope', function ($scope, $http, $config, $location, $timeout, $route, $barkChart, $rootScope) {
      console.log('health controller');
      // var url="/js/controllers/heatmap.json";

        var echarts = require('echarts');
        var formatUtil = echarts.format;
        
        $scope.isIE = function() {
            var ua = window.navigator.userAgent;
            var msie = ua.indexOf("MSIE ");
            if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)){
               return true; 
            }
            else {
               return false;
            }
        }

        pageInit();

        $scope.orgs = [];
        $scope.dataData = [];

initBarchart = data => {
    const _this = this;
    const cityArr = data.map(i => i.Q1);
    const dom = document.getElementById('icu-bar-charts');
    const myChart = echarts.init(dom);
    const option = {
      title: {
        text: '加班情况统计条形图',
        subtext: '数据来自https://cloudqa.iego.cn/sr/icu996'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        },
        formatter: val => {
          const Q4 = val[0]; // 加班情况
          const Q5 = val[1]; // 加班工资
          const Q6 = val[2]; // 加班调休
          return `公司名称：${Q4.name}<br>加班情况：${
            mapReverse[Q4.value]

initChart() {
      this.chart = echarts.init(this.$el, 'macarons');

      this.chart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: { // Axis indicator, axis trigger is valid
            type: 'shadow', // The default is a straight line, which can be selected as: 'line' | 'shadow'
          },
        },
        grid: {
          top: 10,
          left: '2%',
          right: '2%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: [{

//   labelLine: {
              //     normal: {
              //       show: false
              //     }
              //   },
              data: [
                { value: 400, name: '交易完成' },
                { value: 300, name: '支付订单' },
                { value: 200, name: '生成订单' },
                { value: 100, name: '放入购物车' },
                { value: 100, name: '浏览网站' }
              ]
            }
          ]
        };
        this.dom = echarts.init(this.$refs.dom, 'tdTheme');
        this.dom.setOption(option);
        on(window, 'resize', this.resize);
      });
    }

getEchartsInstance() {
    // return the echart object
    return echarts.getInstanceByDom(this.refs.echartsDom) || echarts.init(this.refs.echartsDom, this.props.theme)
  }

initCharts(nodeInfoDataList) {
      this.buildEchartsData(nodeInfoDataList);
      let series = this.buildSeries(this.echartsData);
      var erd = elementResizeDetectorMaker();
      var start = new Date().getTime();
      if (isEmpty(this)) {
        return;
      }
      let infoItemObj = document.getElementById(this.infoItem);
      if (isEmpty(infoItemObj)) {
        return;
      }
      var chart = echarts.init(infoItemObj);

      // 绘制图表
      chart.clear();
      chart = echarts.init(infoItemObj);
      let title = this.infoItem;
      if (
        title == "used_memory" ||
        title == "used_memory_rss" ||
        title == "used_memory_overhead" ||
        title == "used_memory_dataset"
      ) {
        title += "(MB)";
      }

      chart.setOption({
        title: {

mounted: function () {
      const _this = this;
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('chart'));
      _this.f_getTotal();
      _this.f_getChart(function (data) {
        // 绘制图表
        myChart.setOption({
          color: ['#ff0000'],
          title: {
            text: '过去24小时访问数变化',
            subtext: '实时统计',
            textAlign: 'left'
          },
          tooltip: {
            trigger: 'axis'
          },
          toolbox: {
            show: true,
            feature: {

export const drawChart = function(that,config,userConfig) {
  const chartTextColor = '#a1a1a2'
  let originConfig = {
    title: true,
    eye: true,
    dataZoom: true,
    clear: false,
    editTitle: false,
    lineBarSwitch: false,
    chartType: 'line',
    zoomCallback: false // 选择区域后是否需要重新请求数据
  }
  let finalConfig = Object.assign(originConfig, userConfig)
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById(that.elId))
  myChart.resize()
  if (originConfig.clear) {
    myChart.clear()
  }
  let option = {
    backgroundColor: '#f5f7f9',
    title: {
      textStyle: {
        fontSize: 16,
        fontWeight: 'bolder',
        color: chartTextColor          // 主标题文字颜色
      },
      // text: config.title,
      left:'10%',
      top: '10px'
    },

componentDidMount() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 绘制图表
    myChart.setOption({
        title: { text: 'ECharts 入门示例' },
        tooltip: {},
        xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    });
  }
  change(){