echarts 参考资源

更多配置 https://echarts.apache.org/zh/option.html#title
API       https://echarts.apache.org/zh/option.html#series-pie.id
DEMO  https://echarts.apache.org/examples/zh/index.html#chart-type-bar
https://www.makeapie.com/explore.html

ajax+echarts

$(function () {
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    myChart.setOption({
      title: {
        text: '问题状态统计分析',
        x: 'center'
      },
      tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
      },
      legend: {
        orient: 'vertical',
        left: 'left',
        data: []
      },
      toolbox: {
        show: true,
        feature: {
          mark: { show: true },
          dataView: { show: true, readOnly: false },
          magicType: {
            show: true,
            type: ['pie', 'funnel'],
            option: {
              funnel: {
                x: '25%',
                width: '50%',
                funnelAlign: 'left',
                max: 1548
              }
            }
          },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      calculable: true,
      series: [
        {
          name: '',
          type: 'pie',
          radius: '55%',
          center: ['50%', '60%'],
          data: []
        }
      ]
    })
    //饼图动态赋值
    var url = "~/routingAdv/ftymx/getCountType";
    $.ajax({
      url: url,
      async: false,
      //data : {"year":year},
      type: 'post',
      dataType: "json",
      cache: false,
      success: function (data) {
        var names = [];//定义两个数组
        var nums = [];

//{"total":2,"rows":[{"wtzt":"已处理","ct":"3","num":"1"},{"wtzt":"待处理","ct":"3","num":"2"}]}
        $.each(data.rows, function (key, values) { //    List<Map<String,Object>> list 数据结构
         //动态分类
          names.push(values.typename);
          var obj = new Object();
//创建对象， 动态添加
          obj.name = values.typename;
          obj.value = values.zjsum;
          nums.push(obj);
        });
        myChart.setOption({ //加载数据图表
          legend: {
            data: names
          },
          series: {
            // 根据名字对应到相应的系列
            //name: names,       
            data: nums
          }
        });


      },
      error: function (err) {
        alert("查询失败");
      }
    });
  })

自定义颜色

series: [
        {
          name: '直接访问',
          type: 'bar',
          barWidth: '60%',
          data: [10, 52, 20, 34,  0]
          , 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]
                    }
                }
            },
        }
      ]