【echarts应用】---pie饼图篇

目的：对echart 图表进行封装调用--饼图篇。下面是基础的样式，可以改成自己需要的样式。（找个地方保存，以后用到的时候方便复制粘贴，哈哈）

1.页面中引入echarts、jquery文件

<script src="./js/jquery-1.9.0.js"></script>
<script src="./js/echarts.min.js"></script>

echarts官网下载地址：http://echarts.baidu.com/download.html

2.封装代码，可以按照自己的设计图稍做修改，以下只是简单的配置

var numberPie = function (className, data) {
        var myChart2 = echarts.init($("." + className)[0]);
        var legendArr = [];
        for (var key in data) {
            legendArr.push(data[key].name);
        }
        var option = {
            title: {
                text: '饼图test',
                // subtext:'pie',
                x: 'center',                 // 水平安放位置，默认为左对齐，可选为：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
                y: 'top',                  // 垂直安放位置，默认为全图顶端，可选为：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
        
                textStyle: {
                    fontSize: 18,
                    fontWeight: 'bolder',
                    color: '#333'          // 主标题文字颜色
                },
                // subtextStyle: { 
                //     color: 'red'          // 副标题文字颜色
                // },
              
            },

            tooltip: {                    //提示框样式，鼠标悬浮交互时的信息提示
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {                     //图例
                orient : 'vertical', // 布局方式，默认为水平布局，可选为：'horizontal' ¦ 'vertical'
                x: 'right',
                y: 'center',
                data: legendArr,
                // textStyle: {
                //     color: "red"
                // }
            },
          
            color: ["#d58930", "#28cfed", "#236be2", "#bd59d5", "#2fcea7", "#ee4a4b", "#0c9cef"],
            series: [
                {
                    name: '数量统计',
                    type: 'pie',
                    radius: '60%',//环 ['50%,'70%']
                    
                    center: ['40%', '50%'],
                    data: data
                }
            ]
        };
        myChart2.setOption(option);
    };

3.调用封装的饼图方法

var data= [
  {"value":10, "name":"医疗"},
  {"value":5, "name":"市政"},
  {"value":15, "name":"电力"},
  {"value":25, "name":"能源"},
  {"value":20, "name":"石化"},
  {"value":35, "name":"交通"},
  {"value":30, "name":"电力"},
  {"value":40, "name":"能源"}
]
    // $.getJSON("./json/pie.json", function (data) { //实际应用就是写在ajax里面
        numberPie("pie", data);
    // });

【echarts应用】---pie饼图篇

猜你喜欢