为了账号安全,请及时绑定邮箱和手机立即绑定

ECharts 快速入门教程

2017.08.30 17:29 7173浏览
ECharts 快速入门教程
  • 基于准备好的 dom,初始化 echarts 实例:
var myChart = echarts.init(document.getElementById('main'));
  • 指定图表的配置项和数据:
var option = {
    title: {
        text: 'ECharts 入门示例'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: ["衬衫", "雪纺衫", ,"高跟鞋"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 36, 20]
    }]
};
  • 使用刚指定的配置项和数据显示图表:
myChart.setOption(option);
  • ECharts 中有一些通用的样式,如阴影、透明度、颜色、边框颜色、边框宽度等,这些样式一般都会在 series 的 itemStyle 里设置:
itemStyle: {
    normal: {
        shadowBlur: 200,
        shadowOffsetX: 0,
        shadowOffsetY: 0,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
    }
}
  • itemStyle 有 normalemphasis 两个选项,normal 选项是正常状态的样式,emphasis 是鼠标 hover 时候的高亮样式:
itemStyle: {
    emphasis: {
        shadowBlur: 200,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
    }
}
  • 要把整个主题改成深色主题,需要改 背景色 和 文本样式。

背景色全局 样式,所以,需要直接在 option 下设置 backgroundColor

setOption({
    backgroundColor: '#2c343c'
})

文本样式可以设置全局的 textStyle

setOption({
    textStyle: {
        color: 'rgba(255, 255, 255, 0.3)'
    }
})

也可以在每个series分别设置,每个series的文本设置在 label.normal.textStyle

label: {
    normal: {
        textStyle: {
            color: 'rgba(255, 255, 255, 0.3)'
        }
    }
}
  • 设置标签的视觉引导线 labelLine 的颜色(label 和 labelLine 也有 normal 和emphasis 两个状态):
labelLine: {
    normal: {
        lineStyle: {
            color: 'rgba(255, 255, 255, 0.3)'
        }
    }
}
  • ECharts 中每项数据样式可以分别设置data下的数据项实现:
data: [{
    value: 400,
    name: '搜索引擎',
    itemStyle: {
        normal: {
            color: '#c23531'
        }
    }
}, ...]
  • ECharts 中实现异步数据的更新非常简单,在图表初始化后通过 jQuery 等工具异步获取数据后,在 setOption 填入数据和配置项即可。
    或者先设置完其它的不涉及数据的样式,显示一个空的直角坐标轴,然后获取数据后填入数据:
var myChart = echarts.init(document.getElementById('main'));

// 显示标题,图例和空的坐标轴
myChart.setOption({
    title: {
        text: '热销品类销量统计'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: []
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: []
    }]
});
// 异步加载数据
$.get('data.json').done(function (data) {
    // 填入数据
    myChart.setOption({
        xAxis: {
            data: data.categories
        },
        series: [{
            // 根据名字对应到相应的 series 
            name: '销量',
            data: data.data
        }]
    });
});
  • ECharts 默认提供了加载动画,只需要调用showLoading方法显示。数据加载完成后再调用hideLoading方法隐藏加载动画:
myChart.showLoading();
$.get('data.json').done(function (data) {
    myChart.hideLoading();
    myChart.setOption(option);
});
  • ECharts 提供了 Media Query『随着容器尺寸改变而自适应』,设置如下:
option = {
    baseOption: { // 初始显示
        title: {...},
        legend: {...},
        series: [{...}, {...}, ...],
        ...
    },

    media: [ // 媒体查询
        {
            query: { // 这里写规则
                minWidth: 200,
                maxHeight: 300
            },
            option: { // 这里写此规则满足下的 option
                legend: {...},
                ...
            }
        },
        {
            query: {...},   // 第二个规则
            option: {       // 第二个规则对应的 option
                legend: {...},
                ...
            }
        },
        {                   // 这条里没有写规则,表示『默认』
            option: {       // 即所有规则都不满足时,采纳这个 option
                legend: {...},
                ...
            }
        }
    ]
};
点击查看更多内容
15人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 邀请有奖 帮助中心 APP下载
官方微信

举报

0/150
提交
取消