echarts-配置集合

已于 2023-10-18 14:21:27 修改
阅读量998 收藏 3
点赞数 1
文章标签： echarts javascript ecmascript
于 2023-03-24 10:10:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_53397360/article/details/129744128
版权

ehcarts属性简单配置：

  • x轴或y轴标签全部显示：在xAxis或yAxis中axisLabel中设置interval: 0
  • 自定义富文本样式，设置color为系列色：可设置color: ‘inherit’
  • 双柱图或多柱图设置不同系列柱子的间隔：可在series中设置barGap：‘30%’ （注：设置多个则只有一个值有效）
  • 设置同一个系列柱子之间间距：可在series中设置barCategoryGap:‘90%’ (注：设置barWidth后该值无效且多个则只有一个值有效()

echarts-配置集合

柱状图-双柱（空心柱+实心柱,两个不同宽度的柱子重叠）

在这里插入图片描述

option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      axisTick: {
        alignWithLabel: true
      }
    },
    {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      axisTick: {
        alignWithLabel: true
      },
      show:false
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      zlevel:1,
      name: 'Direct',
      type: 'bar',
      barWidth: '60%',
      data: [10, 52, 200, 334, 390, 330, 220]
    },
    {
      xAxisIndex:1,
      name: 'Direct',
      type: 'bar',
      barWidth: '60%',
      itemStyle:{
        color:'rgba(0,0,0,0)',
        borderColor:'blue',
        borderWidth:3,
      },
      barWidth:90,
      data: [50, 122, 300, 434, 590, 630, 320]
    }
  ]
};

柱状图-三个柱子（其中两个不同宽度柱子重叠）

在这里插入图片描述

option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      axisTick: {
        alignWithLabel: true
      }
    },
    {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      axisTick: {
        alignWithLabel: true
      },
      show:false
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      zlevel:1,
      name: 'Direct',
      type: 'bar',
      barWidth: 30,
      data: [10, 52, 200, 334, 390, 330, 220]
    },
    {
      zlevel:1,
      name: 'Direct',
      type: 'bar',
      barWidth: 30,
      color:'green',
      barGap:0.32,
      data:[6, 13, 31, 44, 69, 43, 52]
    },
    {
      xAxisIndex:1,
      name: 'Direct',
      type: 'bar',
      itemStyle:{
        color:'rgba(0,0,0,0)',
        borderColor:'blue',
        borderWidth:3,
      },
       barGap:0,
      barWidth:40,
      
      data: [50, 122, 300, 434, 590, 630, 320]
    },
    {
      xAxisIndex:1,
      name: 'Direct',
      type: 'bar',
      itemStyle:{
        color:'rgba(0,0,0,0)',
      },
      barWidth:40,
      barCategoryGap:0,
      data: [60, 132, 310, 444, 690, 430, 520]
    },
  ]
};

柱状图-柱状图阴影比柱子宽

在这里插入图片描述

option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      axisTick: {
        alignWithLabel: true
      }
    },
    {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      axisTick: {
        alignWithLabel: true
      },
      show:true
    },
    {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      axisTick: {
        alignWithLabel: true
      },
      show:false
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      zlevel:1,
      name: 'Direct',
      type: 'bar',
      barWidth: 30,
      data: [10, 52, 200, 334, 390, 330, 220]
    },
    // {
    //   zlevel:1,
    //   name: 'Direct',
    //   type: 'bar',
    //   barWidth: 30,
    //   color:'green',
    //   barGap:0.32,
    //   data:[6, 13, 31, 44, 69, 43, 52]
    // },
    {
      zlevel:1,
      xAxisIndex:1,
      name: 'Direct',
      type: 'bar',
      itemStyle:{
        color:'rgba(0,0,0,0)',
        borderColor:'blue',
        borderWidth:3,
      },
      barGap:0,
      barWidth:40,
      
      data: [50, 122, 300, 434, 590, 630, 320]
    },
    // {
    //   zlevel:0,
    //   xAxisIndex:1,
    //   name: 'Direct',
    //   type: 'bar',
    //   itemStyle:{
    //     color:'rgba(0,0,0,0)',
    //   },
    //   barWidth:40,
    //   barCategoryGap:0,
    //   data: [60, 132, 310, 444, 690, 430, 520]
    // },
    {
      zlevel:0,
      xAxisIndex:2,
      name: 'Direct',
      type: 'bar',
      showBackground:true,
      itemStyle:{
        color:'rgba(0,0,0,0)'
      },
      barWidth:80,
      barCategoryGap:0,
      data: [60, 132, 310, 444, 690, 430, 520]
    },
  ]
};

双向柱状图

在这里插入图片描述

option = {
  title: {
    text: 'World Population'
  },
   tooltip: {
    show: true,
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
  },
  legend:{
    
  },
  grid: [
    {
      left: "5%",
      width: "43%",

    },
    {
      left: "51.5%",
      width: "10%",
    },
    {
      right: "5%",
      width: "43%",

    },
  ],
  xAxis: [
    {
      type: "value",
      inverse: true,
      show: true,
    },
    {
      gridIndex: 1,
      show: false,
    },
    {
      gridIndex: 2,
      type: "value",
      show: true,
    },
  ],
  yAxis: [
    {
      axisLabel: {
        show: false,
      },
      type: "category",
     data: ["10","20", "30",]
    },
    {
      gridIndex: 1,
      position: "center",
      axisLine: {
        show: false,
      },
      type: "category",
      data: ["10","20", "30",]
      
    },
  
    {
      gridIndex: 2,
      position: "left",
      axisLabel: {
        show: false,
      },
      type: "category",
     data: ["10","20", "30",]
    },
  ],
  series: [
    {
      type: "bar",
      barWidth: 15,
      name: "data1",
      data:[10,20,30],
    },
    {
      type: "bar",
      barWidth: 15,
      xAxisIndex: 2,
      yAxisIndex: 2,
      name: "data2",
       data:[10,20,30],
    },
  ],
};

双柱状-双折线图，折线偏移至每个柱子上方

在这里插入图片描述

option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      crossStyle: {
        color: '#999'
      }
    }
  },
  toolbox: {
    feature: {
      dataView: { show: true, readOnly: false },
      magicType: { show: true, type: ['line', 'bar'] },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  legend: {
    data: ['Evaporation', 'Precipitation', 'Temperature']
  },
  xAxis: [
    {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      axisPointer: {
        type: 'shadow'
      }
    },
    {
    },
  ],
  yAxis: [
    {
      type: 'value',
      name: 'Precipitation',
      min: 0,
      max: 250,
      interval: 50,
      axisLabel: {
        formatter: '{value} ml'
      }
    },
    {
      type: 'value',
      name: 'Precipitation',
      min: 0,
      max: 250,
      interval: 50,
      axisLabel: {
        formatter: '{value} ml'
      }
    },
  ],
  series: [
    {
      name: 'Evaporation',
      type: 'bar',
      tooltip: {
        valueFormatter: function (value) {
          return value + ' ml';
        }
      },
      data: [
        2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 
      ]
    },
    {
      name: 'Precipitation',
      type: 'bar',
      tooltip: {
        valueFormatter: function (value) {
          return value + ' ml';
        }
      },
      data: [
        2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 
      ]
    },
    {
      name: 'Temperature',
      type: 'line',
      yAxisIndex: 1,
      xAxisIndex:1,
      tooltip: {
        valueFormatter: function (value) {
          return value + ' °C';
        }
      },
      itemStyle:{
        color:'pink'
      },
      data: [
        2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 
      ]
    },
    {
      name: 'Temperature',
      type: 'line',
      yAxisIndex: 1,
      xAxisIndex:1,
      tooltip: {
        valueFormatter: function (value) {
          return value + ' °C';
        }
      },
      itemStyle:{
        color:'orange'
      },
      data:[
        2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 
      ]
    }
  ]
};
option.xAxis[1] = 
  {
    type: 'value',
    //data.length=7
    max: 7 * 100,
    show: false,
    axisPointer:{
      // show:false
      label:{
        show:false
      }
    }
  }
  option.series[2].data = option.series[2].data.map((x, i) => {
    return [30 + i * 100, x]
  })
  option.series[3].data = option.series[3].data.map((x, i) => {
    return [70 + i * 100, x]
  })

立体柱状图（3D柱状图）

请添加图片描述

option = {
  tooltip:{
    show:true,
  },
  xAxis: [
    {
      axisPointer:false,
      show:false,
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', ],
        axisLine: {
          show: false 
        },
      axisTick: {
        show: false 
      },
    },
    {
      axisPointer:false,
      triggerEvent:false,
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', ],
      gridIndex:1,
      axisTick: {
        show: false //刻度线
      },
    },
    {
        axisPointer:false,
         triggerEvent:false,
      show:false,
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', ],
      gridIndex:2,
      axisLine: {
        show: false //隐藏y轴
      },
      axisTick: {
        show: false //刻度线
      },
    }
  ],
   grid: [
    {
      left: "60",
      right: "60",
      top:'100',
      height:'760',
      width:'1200',
    },
    {
      left: "50",
      right: "40",
      top:'130',
      height:'760',
       width:'1200',
    },
    {
      left: "120",
      right: "40",
      top:'60',
      height:'760',
       width:'1200',
    },
  ],
  yAxis:[
     {
      offset:15,
      show:true,
      type: 'value',
      axisLine: {
        show: false //隐藏y轴
      },
      splitLine:{
        show:false
      },
      axisLabel:{
        show:true,
        formatter:'\n\n\n\n\n\n'+'- - - - - - - - - - -',
        rotate:45,
        inside:true,
        color:'gray',
        margin:-15,
      }
    },
    {
    type: 'value',
    gridIndex:1,
      axisLine: {
        show: true, //隐藏y轴,
      },
      axisTick: {
        show: false //刻度线
      },
      splitLine:{
        show:false
      }
    },
    {
        type: 'value',
        gridIndex:2,
        axisLabel:true,
        splitLine:{
          lineStyle:{
          type:'dashed',
        }
      },
      axisLine: {
        show: false //隐藏y轴
      },
       axisTick: {
        show: false //刻度线
      },
    },
  ],
  series: [
    {
      name: '底部截面',
      type: 'pictorialBar', //pictorialBar 象形柱图
      symbolSize: [46, 20], //调整截面形状
      symbolOffset: [0, 8],
       xAxisIndex:0,
      yAxisIndex:0,
      zlevel: 12,
      itemStyle: {
        normal: {
           color: new echarts.graphic.RadialGradient(0.5, 0.5,  0.5, [
                    {
                      offset: 0,
                      color: '#0f3364'
                    },
                    {
                      offset: 0.9,
                      color: '#17488c'
                    },
                    {
                      offset: 1,
                      color: '#2f6a9d'
                    }
                  ])
          
        
        }
      },
      // 实现数字展示在柱状图
      label: {
        show: true,
        position: 'top',
        fontSize: 20,
        color: '#2DB1EF',
        fontWeight: 'bold',
        offset: [0, -10],
        formatter: '{c}分' //添加单位
      },
      data: [1,2,3,4,5]
    },
    {
      type: 'pictorialBar', //pictorialBar 象形柱图
      symbolSize: [46, 20], //调整截面形状
      symbolOffset: [0, -8],
      zlevel: 12,
      xAxisIndex:0,
      yAxisIndex:0,
      symbolPosition: 'end', //图形的位置 'start'：图形边缘与柱子开始的地方内切。'end'：图形边缘与柱子结束的地方内切。'center'：图形在柱子里居中。
      itemStyle: {
        normal: {
          color: new echarts.graphic.RadialGradient(0.5, 0.5,  0.5, [
                  {
                    offset: 0,
                    color: '#0f3364'
                  },
                  {
                    offset: 0.9,
                    color: '#17488c'
                  },
                  {
                    offset: 1,
                    color: '#2f6a9d'
                  }
                ])
        }
      },
      data: [1,2,3,4,5]
    },
    {
      type: 'bar', //bar 柱状图
      zlevel:1,
      barWidth: 46,
      barGap: '0%',
      xAxisIndex:0,
      yAxisIndex:0,
      itemStyle: {
        //柱状样式
        normal: {
          color: {
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            type: 'linear',
            global: false,
            colorStops: [
             {
                    offset: 0,
                    color: 'rgba(24,106,183,0.76)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(24,106,183,0.18)'
                  }
            ]
          }
        }
      },
      data: [1,2,3,4,5]
    },
    {
       type: 'bar', //bar 柱状图
       xAxisIndex:1,
       yAxisIndex:1,
        barWidth:1,
       itemStyle:{
       color:'rgba(0,0,0,0)'
       },
        data: [1,2,3,4,5]
    },
    {
       type: 'bar', //bar 柱状图
       xAxisIndex:2,
       yAxisIndex:2,
       barWidth:1,
       itemStyle:{
         
           color:'rgba(0,0,0,0)'
       },
        data: [1,2,3,4,5]
    }
  ]
};

折线图：超过1000为红色（分段型视觉映射）

请添加图片描述

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  visualMap:[
          {
            show: false,
            seriesIndex: 0, 
            dimension: 1,
            pieces: [
              {
                gt: -10,
                lte: 1000,
                color: '#1CC7F9'
              },
              {
                gt: 1000,
                color: '#F25E39'
              }
            ]
          },
        ],
  series: [
    {
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
      smooth: true
    }
  ]
};

饼图自动轮播高亮，tooltip跟随自动轮播显示，鼠标移入暂停轮播显示当前高亮，鼠标移出自动轮播，其他图同理

在这里插入图片描述

option = {
  tooltip: {
    trigger: 'item',
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ]
    }
  ]
};
let currentIndex = -1; // 当前高亮下标
let pieTimmer = setInterval(selectPie, 1000); // 定时器

function selectPie() {
  var length = option.series[0].data.length;
  currentIndex = (currentIndex + 1) % length;
  highlightPie();
}

function highlightPie() { 
  for(var idx in option.series[0].data)
    //取消高亮
    myChart.dispatchAction({
      type: 'downplay',
      seriesIndex: 0,
      dataIndex: idx
    });
    //tooltip显示
    myChart.dispatchAction({
      type: "showTip",
      seriesIndex: 0,
      dataIndex: currentIndex,
    });
      
    //高亮
    myChart.dispatchAction({
      type: 'highlight',
      seriesIndex: 0,
      dataIndex: currentIndex
    });
}
myChart.on('mouseover', (params) => { 
	if(pieTimmer)
		clearInterval(pieTimmer);
	currentIndex = params.dataIndex;
	highlightPie();
});

myChart.on('mouseout', (params) => { 
  if(pieTimmer)
    clearInterval(pieTimmer);
  pieTimmer = setInterval(selectPie, 1000);
});

饼图自动轮播样式2：选中饼图凸出，设置selectedMode后，饼图可以被选中，鼠标点击其中一块，饼图会凸出显示

在这里插入图片描述

option = {
  title: {
    text: 'Referer of a Website',
    subtext: 'Fake Data',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ],
      selectedMode:'single',
      selectedOffset:20,
      select: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

let currentIndex = -1; // 当前高亮下标
let pieTimmer = setInterval(selectPie, 1000); // 定时器

function selectPie() {
  var length = option.series[0].data.length;
  currentIndex = (currentIndex + 1) % length;
  highlightPie();
}
function highlightPie() { 
  myChart.dispatchAction({
      seriesIndex: 0,
      type: 'select',
      dataIndex: currentIndex
    });
}
myChart.on('mouseover', (params) => { 
	if(pieTimmer)
		clearInterval(pieTimmer);
	currentIndex = params.dataIndex;
	highlightPie();
});

myChart.on('mouseout', (params) => { 
  if(pieTimmer)
    clearInterval(pieTimmer);
  pieTimmer = setInterval(selectPie, 1000);
});
兔兔软糖
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
echarts设置刻度值的背景色，隐藏xy轴，使柱状图每根柱的颜色不相同
weixin_41700532的博客
08-24 1万+
1、隐藏xy轴 show：false 2、设置刻度值的背景色 axisLabel:{ backgroundColor: "#ccc", } 3、柱状图每根柱的颜色不相同 itemStyle:{ normal:{ color:function(params) { return "#0000FF" } } }, 完整demo： option = {...
【Echarts】一文快速上手Echarts（持续更新）
热门推荐
慕白Lee的博客
10-29 13万+
如示例代码中的dataFormatter方法就是将原始数据进行格式化，转换为Echarts图表渲染所需要的形式，将Echarts官网的图表对应代码迁移到Vue文件中。如示例代码中的option、dataMap等，它们保存了一些原始数据或者Echarts图表渲染的属性值等。这行代码的意思就是将Echarts引入到Vue文件中，然后就可以直接使用Echarts的功能了。那肯定代码错了呗, 你对比对比上面的代码。以该例为例，是如下代码。选择一个最基本的柱状图吧。
Echarts使用技巧
xiaoqiwyx的博客
06-05 900
第一次写博客，记录一些在做项目过程中学习到的echarts相关的使用技巧。 柱状图阴影 柱状图阴影有两种实现方式，第一种使用barGap属性设置为'-100%'来实现，第二种使用多坐标轴多图层覆盖实现。以下详细说明： （1）barGap: 如果只是简单的但一系列的柱状图建议使用，实现简单，官方配置项手册也有说明，查看请点击echarts官方示例，我就不再赘述了。 （2）多坐...
ECharts数据集合（dataset）用法一（完整举例）
yiqinkongjian的专栏
06-03 2387
为了便于理解请看如图3.6所示的代码，图3.6的系列中绘制了7个柱形图，代码中包含了两组坐标轴（两个X轴和两个Y轴），图3.6中的系列中前3个柱形图对应的是第一组直角坐标轴，其中将seriesLayoutBy配置项设置为“row”，含义为以行为标准绘制图表，也就是说图3.6中强制设置了前三个柱形图对应的类别（X轴）为第1行的2~5列，绘制图形的数据对应的是第2行至第4行的2~5列。代码3-2中，将一个数组赋值给了“x”，代表把“维度1”、“维度5”、“名为score的维度”映射到X轴；
ECharts y坐标轴(yAxis)使用详解
旭东怪的博客
08-05 4万+
yAxis 说明：直角坐标系 grid 中的 y 轴，一般情况下单个 grid 组件最多只能放左右两个 y 轴，多于两个 y 轴需要通过配置offset属性防止同个位置多个 Y 轴的重叠。 1 yAxis.id 说明：组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。 默认：无。 参数类型：string。 2 yAxis.show 说明：是否显示 y 轴。 默认：true。 参数类型：boolean。 可选值： （1）true，显示y轴...
echart柱图 柱子之间的间距、不显示X轴Y轴网格线
m0_63057114的博客
06-25 1万+
barCategoryGap:'0%', /*多个并排柱子设置柱子之间的间距*/show: false, //不显示坐标轴线、坐标轴刻度线和坐标轴上的文字。show: false, //不显示坐标轴上的文字。{name: '平均值',type: 'average'}barGap:'0%', /*多个并排柱子设置柱子之间的间距，{name: '最大值',type: 'max'},{name: '最小值',type: 'min'}//barWidth:20, //设置柱子的宽度。
吉林地图js附赠echarts-min-js和china-js和china-json和其他各省市json文件和省js和echarts-amap-min.rar
08-06
JavaScript文件可能包含了处理这些数据并将其显示在ECharts地图上的函数和配置。 ECharts库中的`echarts-min.js`是ECharts的核心库，经过压缩后体积较小，适合在网页中快速加载。`china-js`可能是一个包含中国所有...
echarts-visualization
05-30
"echarts-visualization"这个项目，正如其名，是一个使用ECharts进行大数据可视化的面板案例集合。 在这个压缩包文件"echarts-visualization-master"中，我们可以期待找到一系列使用ECharts实现的示例代码，这些...
echarts-examples-V3.8-20171109 样例代码集合
11-10
《ECharts样例代码集合——探索数据可视化之美》 ECharts，一款由百度开源的、基于JavaScript的数据可视化库，以其丰富的图表类型、优秀的交互性以及良好的性能，深受开发者喜爱。在2017年11月09日，ECharts发布了V...
echarts-demo
04-09
在这个名为"echarts-demo-20131129"的压缩包中，很可能包含的是2013年11月29日时ECharts的一个示例集合。这些示例可能展示了ECharts的基本用法、各种图表的实现以及一些高级功能的应用。通过分析和学习这些示例，...
echarts-大部分插件地图.zip.zip
最新发布
06-17
这个名为 "echarts-大部分插件地图.zip.zip" 的压缩包很可能包含了 ECharts 库的一个集合，特别是关于地图插件的部分。地图插件在 ECharts 中用于展示地理数据，可以用于分析地理位置上的数据分布，比如人口密度、...
echart的引入和样式设置
chenw9527的博客
08-19 504
echart的几个设置X轴
Echarts —自定义label标签的样式(formatter，rich，添加图标等操作)
qq_38718629的博客
09-16 3万+
最近公司项目中在使用Echarts绘制图表时，由于默认的label标签不能满足设计稿需求，所以研究了对label标签进行格式化的方案，了解到可以使用formatter内容格式器对标签内容进行调整，formatter支持字符串模板和回调函数两种形式，下面以饼图为例对formatter格式化标签label标签遇到的情况记录如下。
echarts各个配置项解析（详细解析哦）
前端小白在前进的博客
03-25 4292
echarts各配置项titletooltiplegendgridxAxisyAxiscolorseries（最重点） 解释echarts各配置项是按照下方图片的案例进行的（源码来自echarts官网：echarts案例） option = { title: { text: 'Stacked Line' }, tooltip: { trigger: 'axis' }, legend: { data: ['Email', 'Union Ads', 'Video Ad
ECharts的简单应用
suren_jun的博客
10-17 1052
Apache ECharts一个基于JavaScript的开源可视化图表库。SVG与Canvas比较svg 是一种矢量图，而 canvas 依赖于分辨率。所以 svg 放大不会失真，但是 canvas 绘制的图形会失真。svg 支持事件处理器，而 canvas 不支持事件处理器。svg 中的文字独立于图像，文字可保留，可编辑和可搜索，canvas 的文本渲染能力弱。canvas 适合图像密集型的游戏，频繁地重绘图像，svg 绘制的复杂度高时减慢渲染的速度。
echarts常见的配置
m0_53912016的博客
09-14 2359
官方 折线图 折线图地址 折现点 折现点在 series里面来写 symbol: "none",//折点不显示 symbol: "circle", //折点设定为实心点 symbolSize: 8, //设定实心点的大小
三、Echart图表 之 X轴（xAxis）与 Y轴（yAxis）配置项大全
weixin_55181759的博客
05-18 2万+
🍓 作者主页：💖仙女不下凡💖 🍓 前言介绍：以下👇内容是我个人对于该技术的总结，如有不足与错误敬请指正！ 🍓 欢迎点赞👍 收藏⭐ 留言📝 相关账号会持续发布关于文章Echart的相关文章欢迎持续关注！ 🍓官网地址：https://echarts.apache.org/examples/zh/index.html#chart-type-line 参考文章：Echarts X轴（xAxis） xAxis与yAxis中有很多配置项，下面我以xAxis进行详解，yAxis参考xAxis即可 axisLine：
可视化 | pyecharts之柱状图常用配置篇
weixin_47172744的博客
04-20 7480
前言 pyecharts的可视化大法，让人爱不释手。柱状图是我们最为常用的可视化统计图，本篇主要介绍了pyecharts的绘制柱状图的常用配置，主要包括以下内容： 基础柱状图 隐藏图例标签数字 坐标轴名称命名 旋转X轴标签 增加标记线或者标记点 柱子宽度设置 不同系列间柱间距离 自定义柱状颜色 柱状堆叠图 在柱状图中同时绘制折线图 实例详解 基础柱状图 from pyecharts import options as opts from pyecharts.charts import * x_inde
echarts柱状图常用属性配置
周金鱼啊
01-02 5779
let myChart = this.$echarts.init(document.getElementById("plant-charts")); // 绘制图表 myChart.setOption({ tooltip: { formatter: "{c}℃" //设置鼠标划上提示文字 }, g...
echart配置tooltips自定义
04-11
这句话是用编码表示的，需要先解码为文本才能理解其含义。解码后是“如何设置图表的自定义提示框”，下面给出回答： 在使用b'echart'绘制图表时，可以通过设置tooltip属性来自定义提示框。比如设置tooltip.trigger为 'axis' ，表示当指针悬停在坐标轴上时触发显示提示框，设置tooltip.formatter为一个函数，用来格式化提示框的内容。此外，还可以设置tooltip.showDelay、tooltip.hideDelay、tooltip.backgroundColor等属性来进一步定制提示框的样式和行为。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值