Echarts
数据可视化操作
Sunshine_Jian
这个作者很懒,什么都没留下…
展开
-
Echarts中legend翻页效果
效果图:关键代码:legend: { width:600, type:'scroll', top:'5%', // itemWidth: 10, data: a.data.data.map(item=>{ return item.name })},原创 2021-12-27 17:45:47 · 2144 阅读 · 0 评论 -
Echarts折线图ToolTip数据的排序
提示框数据排序;原创 2021-12-27 15:37:42 · 3420 阅读 · 1 评论 -
Echarts——legend前面的小圆点
效果图:参数可选项:icon: "circle", // 这个字段控制形状 类型包括 circle,rect ,roundRect,triangle,diamond,pin,arrow,none关键代码:legend: { top: '5%', left: 'center', icon: "circle", },...原创 2021-11-12 11:55:35 · 4676 阅读 · 0 评论 -
Echarts中tooltip前面的小圆点
场景:使用自定义格式(formatter)后,前面的小圆点消失。解决办法:tooltip: { trigger: 'item', formatter:function(param){ return param.marker + " " + param.name + " : " + param.percent + "%"; } },效果图:备注:1、显示文字换行的时候,拼接 +"<br>"+ ...原创 2021-11-12 11:43:48 · 4231 阅读 · 2 评论 -
环形饼图——基本案例
效果图:代码:import * as echarts from 'echarts';var chartDom = document.getElementById('main');var myChart = echarts.init(chartDom);var option;option = { title: { text: '总支出', subtext: '1000', left: 'center', top: '47%', ...原创 2021-11-12 11:57:59 · 771 阅读 · 0 评论 -
Echarts柱形图顶部合计
需求:在堆叠柱形图的的顶部做一个合计;效果图://series后面push下面一项{ name: "总计", type: "bar", stack: "Search Engine", label: { normal: { show: true, position: "top", ...原创 2021-11-05 18:02:38 · 1366 阅读 · 0 评论 -
Vue——Echarts实现折线图
一、在项目里安装npm install echarts -S二、新建test.vue<template><divid="test_app"><!--为echarts准备一个具备大小的容器dom--><divid="main"style="width:100%;height:520px;background:#fff"></div></div></temp...原创 2021-07-21 11:18:01 · 7882 阅读 · 0 评论 -
Echarts柱形图堆叠
应用场景:一些柱形图在数据量比较多的时候,横向排列受到挤压,导致柱形图,变的非常细,影响整体的效果。所以应该将柱形图堆叠起来,这样就会好很多。先上效果图:关键字:series-stack//数据堆叠,同个类目轴上系列配置相同的stack值后,后一个系列的值会在前一个系列的值上相加。var option = {series: [ { name: "钢铁侠", type: "bar",//柱状图 ...原创 2021-11-04 10:55:01 · 27756 阅读 · 3 评论