ECharts 配置语法学习笔记

1. 基本配置项

ECharts 的基本配置项包括标题组件、图例组件、工具箱组件以及提示框组件等。

示例：

javascriptCopy Code
option = {
    title: {
        text: '某站点用户访问来源',
        subtext: '纯属虚构',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data:[
                {value:335, name:'直接访问'},
                {value:310, name:'邮件营销'},
                {value:234, name:'联盟广告'},
                {value:135, name:'视频广告'},
                {value:1548, name:'搜索引擎'}
            ],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

其中，title 是标题组件，tooltip 是提示框组件，legend 是图例组件，series 是系列列表，每一个系列可以是折线图、柱状图、饼图等。

2. 数据格式

在 ECharts 中，数据格式一般采用数组的形式，可以是单个数据项，也可以是多个数据项组成的数组。

示例：

javascriptCopy Code
option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
};

3. 图表样式配置

ECharts 支持对图表的样式进行自定义配置，包括线条样式、文字样式、标记样式等。

示例：

javascriptCopy Code
option = {
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        areaStyle: {}
    }]
};

其中，areaStyle 是区域填充样式配置。

4. 事件处理

ECharts 支持对图表的事件进行处理，包括点击事件、鼠标移动事件等。

示例：

javascriptCopy Code
myChart.on('click', function (params) {
    console.log(params);
});

其中，myChart 是 ECharts 实例化后的对象，params 是事件处理函数的参数。

5. 组件动态更新

ECharts 支持对组件进行动态更新，包括数据、样式等。

示例：

javascriptCopy Code
// 更新数据
myChart.setOption({
    xAxis: {
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320]
    }]
});

// 更新样式
myChart.setOption({
    series : {
        lineStyle: {
            color: 'red'
        }
    }
});

其中，setOption 是更新组件的方法，可以传入一个新的配置项来更新组件。