Echarts学习笔记

先导入包

const chart = echarts.init(document.getElementById('chart');
const option = {};
chart.setOption(option);复制代码

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    legend: {
        data:['china', 'english', 'usa']
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    series: [{
        data: [10,20, 1, 30, 15, 20],
        name: 'china',
        type: 'line',
        smooth: true
    }, {
        data: [7, 11, 7, 20, 1],
        name: 'english',
        type: 'line',
    }, {
        data: [42, 100, 20, 71, 20],
        name: 'usa',
        type: 'line',
        areaStyle: {},
        smooth: true,
    }, {
        data: [],
        type: 'line',
        stack: '总量',
        areaStyle: {}
    }, {
        data: [],
        type: 'line',
        stack: '总量',
        areaStyle: {},
        label: {
            normal: {
                show: true,
                position: 'top'
            }
        }
    }]
};
复制代码

• series数组中的每个对象表示一组数据
• 数据对象的type字段为这种数据在图表中的显示类型
• line为折线，areaStyle表示是面积图，面积的曲边默认是折线
• 加上smooth: true，则是曲线
• 需要x轴y轴的图表需传入xAxis yAxis字段
• legend属性存储着数据列对象的name属性值，默认点击图例会将该数据对象从图表中清除
• toolbox属性中存储着图表工具，saveAsImage将图表当做图片下载
• stack属性，设置数据对象是否堆叠
• label设置该数据对象的数据标签是否显示以及位置 inside为内部

option = {
    yAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu']
    },
    xAxis: {
        type: 'value'
    },
    series: [{
        data: [1, 2, 3, 4],
        type: 'bar',
        stack: '总量',
    }, {
        data: [1, 8, 4, 2],
        type: 'bar',
        stack: '总量',
    }, {
        data: [2, 2, 10, 6],
        type: 'bar',
    }]
};
复制代码

• x轴y轴不对调的话，就是柱状图，对调就是条形图
• 设置stack保持多组数据柱子堆叠在一起

option = {
    series: [
        {
            name: 'any',
            type: 'pie',
            radius: ['50%', '70%'],
            data: [
                {name: 'key1', value: 10},
                {name: 'key2', value: 20},
                {name: 'key3', value: 30}
            ]
        }
    ]
}
复制代码

• radius: ['50%', '70%'], 表示环形图
• radius: '50%' 不填或填字符串表示饼图

option = {
    xAxis: {},
    yAxis: {},
    series: [
        {
            name: '',
            type: 'scatter',
            symbolSize: 30,
            data: [
                [10,11], [20, 11], [2, 40], [50, 30]
            ]
        }
    ]
}复制代码

• 散点图

未完待续:)