引入echarts
-
script标签引入
-
yarn add echarts
yarn add --dev @types/echarts
然后于主文件中import即可
注意的是,练习的时候echarts版本不要太高,4.8.0正好。
一些功能
换主题
echarts.init(xxx,'dark')
加强代码提示
安装 @types/echarts
会有代码提示,如echarts.init(xxx,theme:'dark')
,theme
为提示
启动渲染
setOption()
即可
//完整示例
import * as echarts from 'echarts';
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
//操作相关属性
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}
]
};
option && myChart.setOption(option);//这里就是启动了
查看术语表
如tooltip,鼠标在相应item上面会显示该item的相应信息
series里面lineStyle、itemStyle、type等可以控制图标线、item、样式等风格。
更新数据相关
动态更新的原理
手动输入数据,我们只能展示一些静态的数据。现在我们需要进行展示可以更新的动态数据。
其原理是,我们再次进行setOption()
即可。
举例来说,我们可以建立一个按钮,并赋予点击事件,并且做一些函数进行数据的改变。点击后,数据会进行相应的更新。
loaderMoreButton.addEventListener('click',()=>{
chart.setOption({
xAxis:{
data:[...xData,changexdata()] //改变x坐标轴坐标名
},
series:[{
data:[...values,changevalues()] //改变x坐标轴数据
}]
})
})
showLoading() & hideloading()
假如数据是从服务器拿到的,中间需要等待,我们也可以使用showLoading()
和 hideLoading()
,它可以在等待中出现一个加载中的样式。
其中,showloading在setOption启动之前,hideLoading在setOption结束之后,马上就要用安排上。
防抖设置(小技巧)
如果触发数据更新的按钮或相关事件被用户一直点击,数据就会不停的请求或更新,这样就会造成一定程度的bug。
我们可以设置一个默认值为false的布尔值变量,当setOption() 要开始进行前,它会变成true。setOption()结束后马上变成false。
于是可以进行判断,当其已经为true的时候,我们的点击不会进行到下一步。
代码示例:
let isLoading = false
loaderMoreButton.addEventListener('click',()=>{
if(isLoading === true){return}
chart.showLoading()
isLoading = true
setTimeout(()=>{
chart.setOption({
//相关代码
})
chart.hideLoading()
isLoading = false
},2000)
})
其他
.on可以进行点击事件,必须是可点击的区域。
chart.on('click',()=>{
//操作内容
})
饼状图
调整百分比位置的关键属性:
label:{
show:true,
position:'inside',
fontSize:12,
formatter: '{d}%',
},
外部为文字描述,内部为百分比。直接在series里设置内外两个数据即可。
大小关键属性:
radius