设置主题
我们在 echarts.init 初始化的时候 除了传入第一个参数 元素盒子外 还可以跟第二个参数 字符串:表示主题
默认有两个主题 light明 dark暗 还可以在官网定制生成 theme.js 文件 引入 主题编辑器 - Apache ECharts let mCharts = echarts.init(document.querySelector('#main'),'dark')
调色盘
主题调色盘 全局调色盘 局部调色盘 影响:就近原则
这里:外部整体、系列整体都指定了颜色 但最终的显示效果是由最近的 每一项渐变决定的
color:['#001852','#f5e8c8','#b8d2c7','#c6b38e'],
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: XXData
},
yAxis: { // Y轴
type:'value' // 数值轴
},
series: [
{
name: '销量',
type: 'bar',
data: YYData,
color: ['#82b6e9','#ff6347','#a092f1','#0a915d','#eaf889',],
itemStyle:{
color:{
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#82b6e9' // 0% 处的颜色
}, {
offset: 1, color: '#a092f1' // 100% 处的颜色
}],
global: false // 缺省为 false
}
}
]
相关动画:
let options2 = {
animation:true, // 控制动画是否开启
//animationDuration:2000,// 控制动画 时长 也可以用回调函数
animationDuration: function(arg){
return 500 * arg // 这样设置就是 后面的比前一个动画时长多了 0.5s
},
animationEasing:'bounceOut', // 动画效果 带反弹的 还有其他的可查阅官方文档
animationThreshold:11, // 单元数量大于这个数就会关闭动画 提高性能
}
尺寸自适应 以及更新数据操作
当window窗户口发生变化时 调用 echarts.resize() 重置尺寸事件 保持页面比例稳定
修改数据 直接修改数据源 数组相关的操作方法 再调用 setOption(设置) 方法 图表会自动渲染 不必关心 视图 只重视数据就行了
window.addEventListener('resize',function () {
exec.resize()
})
// window.onresize = exec.resize 精简写法 应该不需要
document.querySelector('#edit').onclick = function () {
let options = {
series: [
{
data: [51, 36, 36, 18, 19, 28],
}
]
}
exec.setOption(options)
}
document.querySelector('#addr').onclick = function () {
XXData.push('碎花裙')
YYData.push(38)
let options = {
xAxis: {
data: XXData
},
series: [
{
data: YYData,
}
]
}
exec.setOption(options)
}
等待动画 在合适的时候开启和关闭
mCharts.showLoading() mCharts.hideLoading()
let mCharts = echarts.init(document.querySelector('#main'))
mCharts.showLoading() // 在获取数据之前 显示加载动画
$.get('../lib/sandianData.json',function (res) {
mCharts.hideLoading() // 当服务器获取数据成功之后 隐藏加载动画