echart图形绘制

1.绘制折线图
let myDom = document.querySelector(dom);//要放的元素
let myChart = echarts.init(myDom, 'light');//使用的主题
let option = {
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['人气量', '收藏量', '转发量', '动态量'],
        right: 'center',
        bottom: 0,
        orient: 'horizontal'
    },
    calculable: true,
    xAxis: [
        {
            type: 'category',
            boundaryGap: false,
            data: ['1天', '2天', '3天', '4天', '5天', '6天', '7天']
        }
    ],
    yAxis: [
        {
            // min: 0,
            // max: 70
            type: 'value'
        }
    ],
    series: [
        {
            name: '人气量',
            type: 'line',//所要选择的图形类型
            itemStyle: {
                // 点的颜色。
                color: '#3995f5'
            },
            data: [5, 20, 36, 10, 10, 20, 40]
        },
        {
            name: '收藏量',
            type: 'line',
            itemStyle: {
                // 点的颜色。
                color: '#15bc84'
            },
             data: [2, 21, 24, 36, 28, 60, 69]
        },
        {
            name: '转发量',
            type: 'line',
            itemStyle: {
                // 点的颜色。
                color: '#ff933e'
            },
             data: [3, 58, 36, 20, 14, 37, 45]
        },
        {
            name: '动态量',
            type: 'line',
            itemStyle: {
                // 点的颜色。
                color: '#db5972'
            },
             data: [6, 4, 8, 15, 35, 48, 50]
        },
    ]
};


// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

2.玫瑰图形

let option = {
        legend: {
            data: [datas[0].name, datas[1].name],
            right: 'center',
            bottom: '10%',
            orient: 'horizontal'
        },
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: '70%',
                center: ['50%', '40%'],
                label: {
                    show: true,
                    formatter: '{b}: {c}({d}%)'//所要显示数据的格式 
                },
                data: [
                    {value: datas[0].value, name: datas[0].name, itemStyle: {color: '#15bc84'}},
                    {value: datas[1].value, name: datas[1].name, itemStyle: {color: '#ff933e'}},
                ]
            }
        ]
};

3.柱状图

let option = {
    legend: {
        data: [datas[0].name, datas[1].name],
        right: 'center',
        bottom: '10%',
        orient: 'horizontal'
    },
    grid:{
        x:100,
        y:80,
        x2:100,
        y2:150,
    },
    calculable : true,
    xAxis : [
        {
            type : 'category',
            data : tamp
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series: [
        {
            name:datas[0].name,
            type:'bar',
            itemStyle: {color: '#15bc84'},
            data:datas[0].value,
            markPoint : {
                data : [
                    {type : 'max', name: '最大值'},
                    {type : 'min', name: '最小值'}
                ]
            },
            markLine : {
                data : [
                    {type : 'average', name: '平均值'}
                ]
            }
        },
        {
            name:datas[1].name,
            type:'bar',
            itemStyle: {color: '#ff933e'},
            data:datas[1].value,
            markPoint : {
                data : [
                    {type : 'max', name: '最大值'},
                    {type : 'min', name: '最小值'}
                ]
            },
            markLine : {
                data : [
                    {type : 'average', name: '平均值'}
                ]
            }
        }
    ]
};