数据可视化
关注
分享
扫一扫
数据可视化
JackieDYH
阅技术、码经验、勤总结、乐分享、喜交流。
展开
-
Echarts折线图中数据根据正负数显示不同区域背景色-配置
Echarts折线图中数据根据正负数显示不同区域背景色。原创 2024-01-15 07:00:00 · 1567 阅读 · 0 评论 -
Echarts中饼图-实现放大显示数据
Echarts中饼图-实现放大显示数据原创 2023-12-27 16:54:03 · 2471 阅读 · 0 评论 -
echarts中api返回数据的结构是时间和数据是两个数组返回的如何使用
如果ECharts的API返回的数据结构是时间和数据分别作为两个数组返回的，你可以将这两个数组分别赋值给x轴和y轴的数据。数组赋值给y轴的数据。这样，你就可以在图表中显示时间和对应的数据了。确保将这些配置包含在传递给ECharts实例的。数组赋值给x轴的数据，使用了。在这个示例中，我们使用了。原创 2024-06-03 07:32:30 · 290 阅读 · 0 评论 -
项目中使用Echarts图表treemap制作
,用rgba(r,g,b,a) 把透明度设置在0.3~1 之间，根据数值大小自己设置。遍历数据加 itemStyle: { // 这里配置每个块的颜色。涨跌幅 负的是绿的，正的是红的然后根据颜色深浅表现出来程度。原创 2024-02-21 14:15:32 · 821 阅读 · 0 评论 -
Echarts中单独为每个legend图例设置样式-根据数据正负显示不同样式
Echarts中单独为每个图例设置样式-根据数据正负显示不同样式。原创 2024-02-21 14:15:51 · 1375 阅读 · 0 评论 -
echarts图表如何自定义鼠标悬浮样式
要自定义鼠标悬浮样式，可以使用 echarts 的 tooltip 组件和 formatter 函数来实现。1.在图表的 option 中添加 tooltip 组件，并设置 trigger 为 'item' 或者 'axis'。2.在 formatter 函数中，获取到鼠标悬浮时的数据信息，然后根据需要自定义 tooltip 的内容和样式。3.在自定义的样式文件中，添加相应的 CSS 样式。这样就可以自定义鼠标悬浮样式了。原创 2023-07-24 16:11:17 · 4848 阅读 · 0 评论 -
Echarts中legend图例的rich属性实现自定义图例的样式-饼图-柱状图等
上图表，展示的字体颜色是不同的，而且和名称之间是有间距使用rich实现在formatter自定义样式名称，在textStyle中定义样式内容。当然我们在自定义title样式时也可以使用同样的方法。原创 2023-07-10 11:03:45 · 6245 阅读 · 0 评论 -
使用echarts展示数据时数据差值较大导致显示图表不美观
echarts 对于数据差值较大，导致显示图形差异很大。原创 2022-09-27 18:07:48 · 1372 阅读 · 0 评论 -
Vue使用G2Plot-Pie饼图实现数据渲染-和类似0.1+0.2导致的精度问题
解决问题查阅官方文档 图示原创 2022-07-12 09:27:25 · 1568 阅读 · 0 评论 -
G2plot图表在Vue中使用-获取新数据后二次渲染图表-案例
Vue组件方式组件使用原创 2022-06-27 09:04:54 · 2405 阅读 · 2 评论 -
antv | G2Plot 数据可视化图表库-案例
G2Plot开箱即用的图表库定义图表插件ChartDiscount.vue<template> <div id="ChartDiscount" ref="ChartDiscount"></div></template><script>import { Line } from '@antv/g2plot'export default { name: 'ChartDiscount', props: { ..原创 2021-11-09 14:30:48 · 1884 阅读 · 0 评论 -
Echarts常用方法初始化和销毁-清除上一次加载的数据源
ECharts图表实例化的APIsetOption(Object option,{boolean = true} notMerge)Object类型的参数 option，表示图表数据结构var option = { title: { text: "我的第一个ECharts图表示例" }, tooltip: { trigger: 'axis' }};boolean notMerge，表示是否合并option。默认为false，可以不设置万能接口，配置图表.原创 2021-01-20 18:40:41 · 6000 阅读 · 3 评论 -
echarts饼图显示百分比和显示内容字体及大小属性设置
源码let circularGraph= { title: "标题", head: false, tuglie: [ "微信", "支付宝", "银行卡", "聚合支付" ], data: [ { name: "度小满", value: 22,...原创 2021-01-06 10:25:48 · 4345 阅读 · 0 评论 -
echarts饼图属性配置-中间展示总和
源码let circularGraph= { title: "标题", head: false, tuglie: [ "微信", "支付宝", "银行卡", ], data: [ { name: "微信", value: 22, }, ..原创 2020-12-28 14:12:47 · 5182 阅读 · 1 评论 -
echarts堆叠柱状图参数配置案例
源码option = { color: ['#5D85FF','#59D88F','#FFB459'], tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器，坐标轴触发有效 type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' } }, legend: { ..原创 2020-12-28 13:31:19 · 1245 阅读 · 1 评论 -
echarts折线图常用属性设置
源码option = { tooltip: {//设置提示 trigger: 'axis', axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } } }, xAxis: { type: 'category', ...原创 2020-12-28 11:43:35 · 1177 阅读 · 0 评论 -
echarts条形图属性设置
源码option = { tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器，坐标轴触发有效 type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' } }, legend: { left: 'center', data: ['较差', '一般'...原创 2020-12-11 14:31:45 · 2575 阅读 · 0 评论 -
echarts饼图属性设置-饼图中间设置总和
源码option = { tooltip: { trigger: 'item', formatter: '{a} <br/>{b} : {c} ({d}%)' }, legend: { orient: 'vertical', left: 'left', data: ['上海', '广州', '中原', '西北', '浙江', '江苏'], orient:"hori...原创 2020-12-11 14:29:33 · 6193 阅读 · 1 评论 -
echarts图表的div高度跟随数据长度自适应
// 排名折线图<template> <div id="charts"> <div id="cate" ref="cate" style="width:5rem;margin-top:.2rem;" ></div><!-- height:9.2rem; --> <!-- 数据说明 --> <div class="dv"> <spa.原创 2020-12-04 15:14:51 · 1746 阅读 · 2 评论 -
vue中通过组件传值给echarts赋值，无法正常渲染页面图表-解决
导致问题<v-zxt class="zxt" :rateObj02="rateObj02" v-if="isZxt"></v-zxt>data(){ return{ rateObj02:{},//收缴率 } },rateObj02中没有设置任何默认属性，这个就是导致问题的关键改进rateObj02:{ comName:["青岛分公司", "杨浦分公司", "广州分公司", "杭州分公司", "苏州分公司", "原创 2020-12-04 09:31:17 · 2353 阅读 · 0 评论 -
Echarts中折线图Y轴数据值太长显示不全-解决办法
正常状态不全的情况所有的数据都是从后台取的，也就是说动态变化的，一开始的时候数据量不大不会出现问题，后面y轴的值越来越大的时候就出现了这个显示不全的情况代码 <div id="chart-line"></div> var lineChart = echarts.init(document.getElementById('chart-line'));// 折线图配置option = { tooltip: { trig原创 2020-12-03 11:00:04 · 4660 阅读 · 0 评论 -
Echarts中条形统计图设置两条数据展示效果-图例样式位置设置
option = { color: ['#36468C','#B2C8FF'], tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器，坐标轴触发有效 type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' } }, legend: { data: ['上月统计...原创 2020-12-03 11:22:21 · 1424 阅读 · 0 评论 -
使用Echarts柱形图属性解读大全
Echarts官网在这个官网中有详细教程以及API，很容易入手Echarts，从个人刚学习Echarts图表来看，它的难度在于它有自己的一套属性，这和我们平时用的css是不同的，因而我们需要什么效果就得去遵守它的属性对柱形图各部分分析:（重点）根据柱形每个部分的专业名称去寻找官网中的配置项手册对应的属性<!DOCTYPE html><html><head> <title>echarts</title><原创 2020-12-01 14:01:56 · 2503 阅读 · 0 评论