需求
最近项目中,前端使用了v-charts进行统计图表的显示,遇到一个需求:
从网络获取统计数据,然后以条形图、柱状图、折线图显示,鼠标点击选中图表中某一条数据之后,高亮显示,默认选中第一条数据。
效果
根据需求设计的效果图如下:
默认选中第一条,点击其他条后,选中该条,如下:
实现
v-charts是基于echarts的再封装,在vue中使用很便利;
在v-charts中给柱状图、条形图、折线图添加点击事件和高亮显示的处理都是一样的,现以条形图为例,
具体实现步骤和代码如下:
最近项目中,前端使用了v-charts进行统计图表的显示,遇到一个需求:
从网络获取统计数据,然后以条形图、柱状图、折线图显示,鼠标点击选中图表中某一条数据之后,高亮显示,默认选中第一条数据。
根据需求设计的效果图如下:
默认选中第一条,点击其他条后,选中该条,如下:
v-charts是基于echarts的再封装,在vue中使用很便利;
在v-charts中给柱状图、条形图、折线图添加点击事件和高亮显示的处理都是一样的,现以条形图为例,
具体实现步骤和代码如下:
secureC
VLAN配置学习总结创建VLAN的命令(以华为设备为例)在系统模式下进行操作[SW1] vlan 20 //单个创建vlan[SW1-vlan20] description vlan-test vlan20 //相关描述信息将改变显示的描述 20 enable default &n
举报文章
请选择举报类型
补充说明
0/200
上传截图
格式支持JPEG/PNG/JPG,图片不超过1.9M