echart研究1.echart使用的几种obj2.自己分装的饼状图3.自己封装的现状图和柱状图和Tree

1.echart使用的几种obj

chartobj.js

var chartobj = [{
        name: "薯片",
        data: { '周一': 20, '周二': 70, '周三': 80, '周四': 60, '周五': 20, '周六': 30, '周日': 200 }
    },
    {
        name: "农夫矿泉水",
        data: { '周一': 150, '周二': 170, '周三': 180, '周四': 160, '周五': 120, '周六': 130, '周日': 150 }
    },
    {
        name: "大米",
        data: { '周一': 50, '周二': 130, '周三': 60, '周四': 20, '周五': 50, '周六': 40, '周日': 10 }
    },

];
var bingobj = [{
    name: "薯片",
    value: 25,
}, {
    name: "农夫矿泉水",
    value: 35,
}, {
    name: "大米",
    value: 13,
}, {
    name: "啤酒",
    value: 43,
}]
var treeobj = [{ name: "广州", id: "0101", parentid: "01", value: "50" },
    { name: "广东", id: "01", parentid: "-", value: "100" },
    { name: "潮州", id: "0102", parentid: "01", value: "50" },
    { name: "深圳", id: "0103", parentid: "01", value: "100" },
    { name: "茂名", id: "0104", parentid: "01", value: "100" },
    { name: "揭阳", id: "0105", parentid: "01", value: "50" },
    { name: "萝岗", id: "010101", parentid: "0101", value: "100" },
    { name: "张", id: "01010101", parentid: "010101", value: "100" },
    { name: "李", id: "01010102", parentid: "010101", value: "100" },
    { name: "天河", id: "010102", parentid: "0101", value: "50" },
    { name: "黄埔", id: "010103", parentid: "0101", value: "50" },
    { name: "白云", id: "010104", parentid: "0101", value: "50" },
    { name: "花都", id: "010105", parentid: "0101", value: "50" },
    { name: "海珠", id: "010106", parentid: "0101", value: "100" },
    { name: "枫溪", id: "010201", parentid: "0102", value: "100" },
    { name: "枫桥", id: "010202", parentid: "0102", value: "50" },
    { name: "罗湖", id: "010301", parentid: "0103", value: "100" }
];
var obj = {
    chartobj: chartobj,
    bingobj: bingobj,
    treeobj: treeobj,
}
export default obj;

2.自己分装的饼状图

3.自己封装的现状图和柱状图和Tree

3.1封装的方法

//获取线状，柱状option
var GetOption = function(obj, chartType) {
        var option = {};
        option.tooltip = {
            trigger: 'axis',
        }
        option.grid = {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        }
        option.xAxis = {
                type: 'category',
                boundaryGap: false,
                data: [],
            }
            //判断是否从0开始，折线图从0，柱状图不从0
        if (chartType == "bar") {
            option.xAxis.boundaryGap = true;
        }
        option.yAxis = {
            type: 'value',
        }
        var legenddata = [];
        option.series = [];
        for (var i = 0; i < obj.length; i++) {
            legenddata.push(obj[i].name);
            var serie = {
                name: obj[i].name,
                type: chartType,
                data: [],
            };
            for (var key in obj[i].data) {
                serie.data.push(obj[i].data[key])
            }
            option.series.push(serie);
        }
        for (var key in obj[0].data) {
            option.xAxis.data.push(key);
        }
        option.legend = {
            data: legenddata
        }
        return option;

    }
    //自动播放
var setAutoTipAndSotp = function(myChart, currentIndex) {
    let auto = autoTip(myChart, currentIndex);
    myChart.on('mouseover', function() {
        //alert(1);
        window.clearInterval(auto);
    });
    myChart.on('mouseout', function() {
        auto = autoTip(myChart, 0);
    });

};
//自动播放tip
var autoTip = function(myChart, currentIndex) {
    let option = myChart.getOption();
    return setInterval(function() {
        let dataLen = option.series[0].data.length;
        // 取消之前高亮的图形
        myChart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: currentIndex
        });
        currentIndex = (currentIndex + 1) % dataLen;
        // 高亮当前图形
        myChart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: currentIndex
        });
        // 显示 tooltip
        myChart.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: currentIndex
        });
    }, 2000);
};
//获取饼状图option
var GetBingOption = function(obj, title) {
    var option = {};
    option.title = {
            text: title,
            x: "right"
        },
        option.tooltip = {
            trigger: "item",
            formatter: "{b} : {c} ({d}%)"
        }
    option.legend = {
        orient: "vertical",
        left: "left",
        data: []
    }
    option.series = [{
        //name: title,
        type: "pie",
        radius: "50%",
        center: ["50%", "60%"],
        data: obj,
        itemStyle: {
            emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
            }
        }
    }];
    // var serie = {

    // };


    for (var i = 0; i < obj.length; i++) {
        option.legend.data.push(obj[i].name);
    };


    return option;
};
//获取树option
var GetTreeOption = function(objs) {
    for (let obj of objs) {
        obj.parent = "";
        obj.children = [];
        if (obj.value == 100) {
            obj.symbol = "rectangle";
            obj.itemStyle = {
                color: "#36ff25",
                borderColor: '#36ff25'
            };
            obj.lineStyle = {
                color: '#36ff25',
                borderColor: '#36ff25'
            };
        } else {
            obj.symbol = "rectangle";
            obj.itemStyle = {
                color: "#ff0000",
                borderColor: "#ff0000"
            };
            obj.lineStyle = {
                color: '#ff0000',
                borderColor: '#ff0000'
            };
        }
    };
    var treedata = transData(objs, "id", "parentid");
    let option = {
        title: {
            text: "Tree"
        },
        tooltip: {
            formatter: function(params) {
                let value = params.data.value;
                if (value) {
                    return value;
                }
                return "";
            }
        },
        legend: {
            orient: "horizontal",
            left: "right",
            data: []
        },

        series: [{
            type: "tree",
            data: treedata,
            left: "2%",
            right: "2%",
            top: "8%",
            bottom: "20%",
            symbol: "emptyCircle",
            orient: "vertical",
            expandAndCollapse: true,
            label: {
                normal: {
                    position: "top",
                    rotate: -90,
                    verticalAlign: "middle",
                    align: "right",
                    fontSize: 10
                }
            },

            leaves: {
                label: {
                    normal: {
                        position: "bottom",
                        rotate: 0,
                        verticalAlign: "middle",
                        align: "right",
                        fontSize: 10
                    }
                }
            },
            animationDurationUpdate: 500
        }]
    };
    return option
};
//转换数据成tree型
var transData = function(a, idStr, pidStr) {
    var r = [],
        hash = {},
        id = idStr,
        pid = pidStr,
        children = "children",
        i = 0,
        j = 0,
        len = a.length;
    for (; i < len; i++) {
        hash[a[i][id]] = a[i];
    }
    for (; j < len; j++) {
        var aVal = a[j],
            hashVP = hash[aVal[pid]];
        if (hashVP) {
            !hashVP[children] && (hashVP[children] = []);
            hashVP[children].push(aVal);
        } else {
            r.push(aVal);
        }
    }
    //console.log(r);
    for (let child of r) {
        setJiBie(child);
    }
    return r;
};
var setJiBie = function(parent) {
    let child = parent.children;
};
var echartoption = {
    GetOption: GetOption,
    setAutoTipAndSotp: setAutoTipAndSotp,
    GetBingOption: GetBingOption,
    GetTreeOption: GetTreeOption,
}
export default echartoption;

3.2使用方式

柱状图（bar），现状图（line）使用

	  let myChart = echarts.init(this.$refs.ZheXianTuSimple, "default");
      console.log(chartobj.chartobj);
      let op=chartoption.GetOption(chartobj.chartobj,'bar');
      myChart.setOption(op);
      chartoption.setAutoTipAndSotp(myChart, 0)

饼状图使用

	 let myChart = echarts.init(this.$refs.ZheXianTuSimple, "default");
     var op =chartoption.GetBingOption(chartobj.bingobj)
     myChart.setOption(op);
     chartoption.setAutoTipAndSotp(myChart, 0)

Tree使用方法

	  let myChart = echarts.init(this.$refs.treeMap, "default");
      let op=chartoption.GetTreeOption(chartobj.treeobj);
      myChart.setOption(op);

Tree节点点击

 	  let myChart = echarts.init(this.$refs.treeMap, "default");
      let op=chartoption.GetTreeOption(chartobj.treeobj);
      myChart.setOption(op);
	  myChart.on("click",function itemclick(params){
              let id = params.data.id;
             alert(id);
      });

Tree根据id高亮当前节点

 	 var GetTreeOption = function(objs, taskid) {
    for (let obj of objs) {
        obj.parent = "";
        obj.children = [];
        console.log(obj);
        obj.symbol = "rectangle";
        obj.itemStyle = {
            color: "#696969",
            borderColor: '#696969'
        };
        obj.lineStyle = {
            color: '#696969',
            borderColor: '#696969'
        };
        if (obj.id == taskid) {
            if (obj.value == 100) {
                obj.symbol = "rectangle";
                obj.itemStyle = {
                    color: "#FFD700",
                    borderColor: '#FFD700'
                };
                obj.lineStyle = {
                    color: '#36ff25',
                    borderColor: '#36ff25'
                };
            } else {
                obj.symbol = "rectangle";
                obj.itemStyle = {
                    color: "#FFD700",
                    borderColor: "#FFD700"
                };
                obj.lineStyle = {
                    color: '#ff0000',
                    borderColor: '#ff0000'
                };
            }
        }
        if (obj.parentid == taskid) {

            if (obj.value == 100) {
                obj.symbol = "rectangle";
                obj.itemStyle = {
                    color: "#36ff25",
                    borderColor: '#36ff25'
                };
                obj.lineStyle = {
                    color: '#36ff25',
                    borderColor: '#36ff25'
                };
            } else {
                obj.symbol = "rectangle";
                obj.itemStyle = {
                    color: "#ff0000",
                    borderColor: "#ff0000"
                };
                obj.lineStyle = {
                    color: '#ff0000',
                    borderColor: '#ff0000'
                };
            }
        }

    };
    //console.log("GetTreeOption");
    //console.log(objs);
    var treedata = transData(objs, "id", "parentid");
    let option = {
        title: {
            text: "Tree"
        },
        tooltip: {
            formatter: function(params) {
                let value = params.data.value;
                if (value) {
                    return value;
                }
                return "";
            }
        },
        legend: {
            orient: "horizontal",
            left: "right",
            data: []
        },

        series: [{
            type: "tree",
            data: treedata,
            left: "2%",
            right: "2%",
            top: "8%",
            bottom: "20%",
            symbol: "emptyCircle",
            orient: "vertical",
            expandAndCollapse: true,
            label: {
                normal: {
                    position: "top",
                    rotate: -90,
                    verticalAlign: "middle",
                    align: "right",
                    fontSize: 10
                }
            },

            leaves: {
                label: {
                    normal: {
                        position: "bottom",
                        rotate: 0,
                        verticalAlign: "middle",
                        align: "right",
                        fontSize: 10
                    }
                }
            },
            animationDurationUpdate: 500
        }]
    };
    return option
};

最后

以上就是自由火车为你收集整理的echart研究1.echart使用的几种obj2.自己分装的饼状图3.自己封装的现状图和柱状图和Tree的全部内容，希望文章能够帮你解决echart研究1.echart使用的几种obj2.自己分装的饼状图3.自己封装的现状图和柱状图和Tree所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。