简单学了一下Echarts

816 阅读2分钟

引入echarts

  1. script标签引入

  2. 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