echarts大部分图形常用配置项总结,标题,提示框,系列,x轴,y轴,下载设置

简介: echarts大部分图形常用配置项总结,标题,提示框,系列,x轴,y轴,下载设置

这里用一个折线图的数据展开说明

var chartDom = document.getElementById("target");
      var myChart = this.$echarts.init(chartDom);
      var option;
      option = {
        //标题组件
        title: {
          text: "",//标题
        },
        //提示框组件
        tooltip: {
          trigger: "axis",//item数据项图形触发,axis坐标轴触发
        },
        //图例组件,控制哪些系列不显示
        legend: {
          type:'scroll',//scroll数量较多时可以使用滚动翻页的图例,默认'plain'普通图例
          top:'7%',//距头部多远
          data: [//头部数据
            "基础设施"
          ],
        },
        //直角坐标系内绘图网格
        grid: {
          top:'20%',  //grid组件距上下左右的距离
          left: "0%",
          right: "4%",
          bottom: "3%",
          containLabel: true,//grid区域是否包含坐标轴的刻度标签。
        },
       //工具栏
        toolbox: {
          feature: {//各工具配置项
            saveAsImage: {},//保存为图片
          },
        },
       //直角坐标系 grid 中的 x 轴
        xAxis: {
          type: "category",//坐标轴类型,category类目轴,适用于离散的类目数据
          boundaryGap: false,//坐标轴两边留白策略,默认为 true
          data: this.data1.arr, //数据
          //坐标轴刻度标签的相关设置
          axisLabel: {
            interval: 0, //横轴信息全部显示
            rotate: -45, //倾斜度 -90 至 90 默认为0
            margin: 5, //刻度标签与轴线之间的距离
            textStyle: {
              fontSize: 9, //横轴字体大小
              color: "#000000", //颜色
            },
          },   
        },
        yAxis: {
          type: "value",//'value' 数值轴,适用于连续数据。
        },
        series: [
          {
            name: "基础设施",//对应的系列
            type: "line",
            stack: "总量",
            data: this.data1.arr2,
          }
        ],
      };
      option && myChart.setOption(option);
    },
  },1.

效果图

image.png


相关文章
|
24天前
|
JavaScript API
Echarts中单独为每个legend图例设置样式-根据数据正负显示不同样式
通过上述方法,我们便能够在ECharts中根据数据的正负为每个图例项设置不同的样式,增强了图表的可读性和表现力。这种方法虽然略显间接,但不失为一种灵活的解决方案。
41 2
echarts如何设置滚动条(dataZoom),实现横向或纵向滚动
echarts如何设置滚动条(dataZoom),实现横向或纵向滚动
echarts如何设置滚动条(dataZoom),实现横向或纵向滚动
|
5月前
|
JavaScript 前端开发 搜索推荐
ECharts词云图(案例一)+配置项详解
ECharts,百度的JavaScript图表库,支持词云图(自5.0版起),借助`echarts-wordcloud`插件。配置词云图涉及`tooltip`(如显示、颜色、边框等)和`series`(类型、形状、大小范围等)。示例代码展示了如何在HTML中引入依赖并配置词云图,包括数据、形状、大小、颜色等。完整代码和依赖可下载。调整这些配置可创建个性化词云图。参阅官方文档获取不同版本详情。
911 4
 ECharts词云图(案例一)+配置项详解
Echarts各类图表常用配置项说明,附示例代码
Echarts各类图表常用配置项说明,附示例代码
|
4月前
echarts 提示框异步获取数据 —— formatter 异步回调函数的使用
echarts 提示框异步获取数据 —— formatter 异步回调函数的使用
123 0
|
6月前
|
数据可视化 前端开发 定位技术
echarts 关于折线统计图常用的属性设置--超详细(附加源码)
echarts 关于折线统计图常用的属性设置--超详细(附加源码)
130 0
|
6月前
Echarts图表设置x轴y轴均随滚轮滚动缩+放 区域缩放
Echarts图表设置x轴y轴均随滚轮滚动缩+放 区域缩放
548 0
|
6月前
|
JavaScript 数据可视化 前端开发
ECharts 的配置语法:配置选项、数据格式、样式设置
ECharts 的配置语法:配置选项、数据格式、样式设置
467 1
|
6月前
|
移动开发 JavaScript
echarts生成图表并下载为PDF文件(附带js源码地址)
echarts生成图表并下载为PDF文件(附带js源码地址)
131 0
|
25天前
|
小程序 前端开发 JavaScript
微信小程序图表制作利器:ECharts组件的使用与技巧
微信小程序图表制作利器:ECharts组件的使用与技巧
48 1

热门文章

最新文章