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


相关文章
|
17小时前
echarts设置单位的偏移
echarts设置单位的偏移
|
16小时前
|
数据可视化 前端开发 定位技术
echarts 关于折线统计图常用的属性设置--超详细(附加源码)
echarts 关于折线统计图常用的属性设置--超详细(附加源码)
25 0
|
16小时前
Echarts图表设置x轴y轴均随滚轮滚动缩+放 区域缩放
Echarts图表设置x轴y轴均随滚轮滚动缩+放 区域缩放
|
16小时前
|
移动开发 JavaScript
echarts生成图表并下载为PDF文件(附带js源码地址)
echarts生成图表并下载为PDF文件(附带js源码地址)
40 0
|
16小时前
|
JavaScript 数据可视化 前端开发
ECharts 的配置语法:配置选项、数据格式、样式设置
ECharts 的配置语法:配置选项、数据格式、样式设置
146 1
|
16小时前
echarts设置多条折线不是你想的那样简单
echarts设置多条折线不是你想的那样简单
|
16小时前
echarts去掉y轴线、设置x轴线的颜色、x轴文字颜色
echarts去掉y轴线、设置x轴线的颜色、x轴文字颜色
|
16小时前
echarts设置暂无数据
echarts设置暂无数据
|
16小时前
|
数据可视化
echarts图表坐标轴数据标签添加下划线
echarts图表坐标轴数据标签添加下划线
63 0
|
16小时前
|
数据可视化 JavaScript 前端开发
Echarts是一个开源的JavaScript可视化库,用于创建各种类型的图表
Echarts是JavaScript的开源可视化库,Python通过Pyecharts库可调用它来绘制图表。示例展示了如何用Pyecharts创建柱状图:定义图表对象,设置标题和坐标轴,添加X轴、Y轴数据,最后渲染展示。Pyecharts还支持折线图、散点图、饼图等多种图表类型,更多详情可查阅官方文档。
32 0

热门文章

最新文章

相关实验场景

更多