MFWSCQ的博客

渐变使用方式：1、new echarts.graphic.LinearGradient2、type: linear拿官网的例子举例：Examples - Apache ECharts这个图中渐变核心部分： series: [ { type: 'bar', showBackground: true, itemStyle: { color: new echarts.graphic.LinearGradient(0, 0.

配置项：const colors = [ { start: '#00bfbf', end: '#95f205' }, { start: '#00bfbf', end: '#02a7f0' }, { start: '#00bfbf', end: '#95f205' }, { start: '#00bfbf', end: '#02a7f0' }, { start: '#00bfbf', ..

图例：配置项：// 进度百分比var value = 20option = { // backgroundColor: '#36467E', title: [{ text: '半圆进度条', left: 'center', top: '70%', textStyle: { color: '#2892E8', fontSize: 14 }...

如图：option = { series: [ { name: 'aaa', type: 'pie', radius: ['20%', '40%'], label: { show: false, position: 'center', formatter: '{value|{c}} \n {name|{b}} \n {percent|{d}}%', rich: {

最初想着怎么给echarts设置vw单位或者rem，echart中怎么把legend的单位设置为vw或者rem来使表格自适应，后面发现行不通。项目中使用px-to-vw包，将所有px转为对应的vw，所有可以根据相同比例进行缩放，做到自适应效果。但是使用了echarts图表，图表中的fontSize和legend的大小等默认都是px单位。当屏宽为4K屏时，其他地方元素字体等都能适应，但是echa...

现有一个 echarts 图表，需要在 y 轴方向上设置一个滚动条，可以滚动数据，x 轴显现的数据固定不动不能跟随滚动条滚动，所以不能直接使用外层盒子的 overflow: auto。可以使用 echarts 的 dataZoom 组件来实现 dataZoom: [ { type: 'slider', show: true, // 设置组件控制的y轴 yAxisIndex: 0, right: 40, top:

timeLine 的type 可以是value，time，category，当我们使用 time 时，data 里面的时刻数据会按照时间先后顺序自动从小到大排序到时间轴上，比如，你的数据是：['2021-08-13 08:00:00','2021-08-13 09:00:00','2021-08-13 10:00:00','2021-08-13 11:00:00','2021-08-13 12:00:00','2021-08-13 06:00:00']那么时间轴上会将最后一个数据

以备后面拿了配置项用作提示：配置项：option = { title: { text: '基础雷达图' }, legend: { data: ['预算分配', '实际开销'] }, radar: { // shape: 'circle', indicator: [ { name: '销售', max: 6500}, { name: '管理',.

配置项：const pieChartData = [ { legendname: 'aaa', value: 53, percent: '15.4%', itemStyle: { color: '#e7e702' }, name: 'aaa | 15.4%' }, { legendname: 'bbb', value: 67, percent: '22.4%', itemStyle: { .

这个柱状图官方示例里面一大堆，主要拿出来看一下各个组件的配置配置项：option = { title: { text: 'test', textStyle: { fontSize: 12, color: '#666' }, // title 的位置 left: 25, top: 20 }, xAxis: { type: 'category', data: ['1月', '2月', '3月',

配置：option = { xAxis: { type: 'value', show: false }, yAxis: { type: 'category', show: false }, grid: { left: 0, right: 0, top: 0, bottom: 0 }, series: [ { name: 'aaa', type: 'bar', da..

例子1：折线图配置项：option = { xAxis: { type: 'category', // 隐藏x轴 show: false, // 坐标轴两边留白策略 boundaryGap: false }, yAxis: { // 隐藏y轴 show: false }, // 控制图表底板的位置 grid: { left: 0, right: 0, top: 0, bottom: 0

鼠标移上去的 item 不会凸出了 hoverAnimation: false,emphasis 里面的 itemStyle 可以设置移上去的 item 样式option = { title: { text: '某站点用户访问来源', subtext: '纯属虚构', left: 'center' }, tooltip: { trigger: 'item' }, legend: { ..