Echart制作图表

制作Echart图表

一，导入文件，创建容器

导入相关文件

<script type="text/javascript" src="/js/echarts/echarts.js"></script>
		<script type="text/javascript" src="/js/echarts/echarts.common.min.js"></script>

在页面上创建一个存放折线图的容器

<div id="allLine"></div>

二，创建对象，配置属性

在js中创建echarts对象，然后在option中配置属性option。

var myChart = echarts.init(document.getElementById("allLine"));
option = {
                title: {
                    text: '收益累计图'
                },
                tooltip: {
                    trigger: 'axis'
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        mark: {
                            show: true
                        },
                        dataZoom: {
                            show: true
                        },
                        dataView: {
                            show: true,
                            readOnly: false
                        },
                        magicType: {
                            show: true,
                            type: ['line', 'bar']
                        },
                        restore: {
                            show: true
                        },
                        saveAsImage: {
                            show: true
                        }
                    }
                },
                xAxis: {
                    type: 'category',
                    name: "日期",
                    boundaryGap: false,
                    data: dates
                },
                yAxis: {
                    type: 'value',
                    axisLine: {
                        lineStyle: {
                            color: '#dc143c'
                        }
                    },
                    name: "累计收益（元）",
                    data: total
                },
                dataZoom: [
                    {
                        type: 'slider',
                        show: true,
                        xAxisIndex: [0],
                        start: 1,
                        end: 100
                    },
                    {
                        type: 'slider',
                        show: true,
                        yAxisIndex: [0],
                        left: '93%',
                        start: 1,
                        end: 100
                    },
                    {
                        type: 'inside',
                        xAxisIndex: [0],
                        start: 1,
                        end: 100
                    },
                    {
                        type: 'inside',
                        yAxisIndex: [0],
                        start: 1,
                        end: 100
                    }
                ],
                series: {
                    data: total,
                    type: "line"
                }

            };
myChart.setOption(option);

注意：

​ 刚接触Echart时先使用title，xAxis（必须），yAxis（必须），series（非必须，但非静态数据则必须）就好。

​ 以上所需后台传过来x轴的数据dates，y轴的数据total

• xAxis是x轴数据，

• yAxis是y轴数据，

• series是很灵活的，主要应对图表数据非静态时的渲染（例如上面的series的type，为bar则为柱状图，line为折线图）

• legend和grid搭配使用会在图标上中角显示提示信息，

• toolbox会显示右上角工具栏，

• dataZoom是x轴和y轴可以滑动的。

三，柱状图

option = {
        title: {
            text: '高收益平均统计柱状图',
        },
        legend: {
            data: ['预期收益', '实际收益']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            name: "产品名称",
            data: data.name
        },
        yAxis: {
            type: 'value',
            axisLine: {
                lineStyle: {
                    color: '#dc143c'
                }
            },
            axisLabel: {
                formatter: '{value} %'
            },
            name: "平均同化率"
        },
        series: [
            {
                data: data.avg,
                name: "预期收益",
                type: 'bar',
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(220, 220, 220, 0.8)'
                }
            },
            {
                data: data.avg2,
                name: "实际收益",
                type: 'bar',
                showBackground: true
            }

        ]
    };

四，多折线图

option = {
        title: {
            text: '高收益统计折线图'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: name
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                mark: {
                    show: true
                },
                dataZoom: {
                    show: true
                },
                dataView: {
                    show: true,
                    readOnly: false
                },
                magicType: {
                    show: true,
                    type: ['line', 'bar']
                },
                restore: {
                    show: true
                },
                saveAsImage: {
                    show: true
                }
            }
        },
        xAxis: {
            type: 'category',
            name: "日期",
            boundaryGap: false,
        },
        yAxis: {
            type: 'value',
            axisLine: {
                lineStyle: {
                    color: '#dc143c'
                }
            },
            axisLabel: {
                formatter: '{value} %'
            },
            name: "收益率"
        },
        dataZoom: [
            {
                type: 'slider',
                show: true,
                xAxisIndex: [0],
                start: 1,
                end: 100
            },
            {
                type: 'slider',
                show: true,
                yAxisIndex: [0],
                left: '93%',
                start: 1,
                end: 100
            },
            {
                type: 'inside',
                xAxisIndex: [0],
                start: 1,
                end: 100
            },
            {
                type: 'inside',
                yAxisIndex: [0],
                start: 1,
                end: 100
            }
        ],
        series: functionNodname(data)
    };
//动态创建折线对象
function functionNodname(data) {
    var series = []
    for(var p = 0; p < data.length; p++) {
        var xyData = [];
        var arr = data[p];
        for(var o = 0; arr.weights.length > o; o++) {
            var coordinate = [];
            coordinate.push(arr.weights[o].dates);
            coordinate.push(arr.weights[o].yield * 100);
            xyData.push(coordinate)
            xyData.push(coordinate)
        }
        var item = {
            name: data[p].p.pname,
            type: 'line',
            data: xyData
        }

        series.push(item)
    }
    return series;

}