美文网首页
echarts使用

echarts使用

作者: 李小白呀 | 来源:发表于2021-12-10 20:01 被阅读0次

echarts使用模板

    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
      legend: {},
      tooltip: {},
      color: ['#acd557', '#6395fa', '#ef9365'],
      dataset: {
        source: [
          ['product', '2015', '2016', '2017'],
          ['星期一', 43.3, 85.8, 93.7],
          ['星期二', 83.1, 73.4, 55.1],
          ['星期三', 86.4, 65.2, 82.5],
          ['星期四', 72.4, 53.9, 39.1],
          ['星期五', 43.3, 85.8, 93.7],
          ['星期六', 83.1, 73.4, 55.1],
          ['星期日', 86.4, 65.2, 82.5],
        ]
      },
      itemStyle: {
        normal: {
          color: function (params) {
            // build a color map as your need.
            var colorList = [
              '#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B',
              '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
              '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
            ];
            return colorList[params.dataIndex]
          },
        }
      },
      // barGap: '10%',
      barCategoryGap: '50px',   // 类目间柱形距离,默认为类目间距的20%,可设固定值
      xAxis: { type: 'category' },
      yAxis: {},
      // Declare several bar series, each will be mapped
      // to a column of dataset.source by default.
      series: [
        { type: 'bar' },
        { type: 'bar' },
        { type: 'bar' }
      ]
    };
    option && myChart.setOption(option);

相关文章

网友评论

      本文标题:echarts使用

      本文链接:https://www.haomeiwen.com/subject/tbchfrtx.html