echarts
Angular baby
软妹前端开发工程师自留地,专注Angular、Vue。
展开
-
echarts的雷达图(radar)鼠标移动到图标上面,如何给数据加单位
我们只需要在雷达图的data中,找到emphasis,这个是控制鼠标悬浮时高亮显示展示的雷达图中的具体数据的样式在label项中,我们配置formatter为:formatter:'{c}(单位)'这样就可以展示出数据的单位了,比如我想要我的数据单位是“%”,那么我的formatter需要这样写formatter:'{c}%'完整的代码:series: [ ...原创 2020-01-16 14:17:41 · 5672 阅读 · 0 评论 -
Angular:echarts制作渐变色仪表盘
仪表盘展示效果如上图所示,颜色要求渐变,刻度分割为4块,下方展示仪表盘名称,下面我们来拆解如何实现:我们需要五个仪表盘,我们通过设置仪表盘的中心点和半径来实现;并且设置在刻度轴上分割4块;每个仪表盘名称相对中心偏移100%即显示在仪表盘底部:以第一个仪表盘为例——{ type: 'gauge', center: ['30%', '2...原创 2019-12-04 17:33:30 · 1580 阅读 · 0 评论 -
Angular:使用echarts制作渐变色雷达图
雷达图对应的图示,雷达图上显示合同量和金额两组数据:legend: { x: 'center', data: ['合同量', '金额'], textStyle: { color: '#fff' } },设置雷达图各个坐标轴的含义、坐标轴位置、坐标轴间隔的样式等:radar: { ...原创 2019-12-02 19:44:34 · 3777 阅读 · 0 评论 -
Angular:实现一个简单的时钟
页面右上角展示一个时钟,我们只需要在html上绑定一个使用data过滤器的数据,在页面上初始化后用setInterval实现时间实时变化即可:<div nz-col nzSpan="4"> <div nz-row> <p style="margin-top:20px;color: #fff;font-size: 19px;font-...原创 2019-11-28 15:44:03 · 865 阅读 · 0 评论 -
Angular:echarts横坐标竖直显示或倾斜展示
今天在使用echarts制作直方图的时候,由于横坐标上xAxis.data太多,导致显示的时候会自动不显示一些项目,这样可能不是我们想要的效果,那要怎么才能让横坐标data竖直显示或者倾斜一定角度显示呢?首先,贴上修改前的直方图的option的xAxis部分:xAxis: [ { type: 'category', data: ['...原创 2019-11-28 09:41:28 · 726 阅读 · 0 评论