Echarts基本的实用属性

最新推荐文章于 2024-04-18 19:10:21 发布

杨同学*

最新推荐文章于 2024-04-18 19:10:21 发布

阅读量1.2k

点赞数 6

分类专栏： js 文章标签： echarts css js 前端

本文链接：https://blog.csdn.net/m0_52539553/article/details/116912245

版权

js 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

大家也可以去Echarts官网查看相关属性：echarts官网，下面都是我在官网中提炼和平时工作中所用到的基本常见属性以及一些特殊属性。
基本结构

<html>
	<div id="container" style="width:100px;height:100px"><div>
</html>
<script>
	var chartDom = document.getElementById('container');
	var myChart = echarts.init(chartDom);
	option = {
		legend: {},//小标签，图例
		grid: {},//图表的位置
		tooltip:{},//鼠标移入显示的文本
		toolbox: {},//拓展的基本功能，复位，下载，转换等等
		xAxis: {},//x轴
		yAxis: {},//y轴
		color:[],//颜色，柱形图，折线等等
		series: {},//存放的数据，值
	}
	 option && myChart.setOption(option);//绘制图表
</script>

详细属性
1，legend，小标签，图例

 legend: {
      top:32,//图例距离页面顶部的距离
      left:'center',//图例的位置，left，center，right
      data: ['降水量', '累计降水'],//图例的名称，有几个就写几个
    },

2，grid，图表的位置

 grid: {
      left: "2%",//图表距离页面左边的距离
      top: "16%",//上
      right: "0%",//右
      bottom: "0%",//下
      containLabel:true,//是否包含坐标轴的刻度标签。
    },

3，tooltip，鼠标移入显示文本

        tooltip: {
              trigger: "axis", //触发类型
              backgroundColor: "rgba(255,255,255,1)", //背景
              textStyle: {
                color: "black", //设置文字颜色
              },
              axisPointer: {//鼠标更随
                type: 'cross',
                label: {
                  backgroundColor: '#fff',
                  color:'#000',
                  borderColor:'#aaa',
                  borderWidth:'1'
                },
              }
            },

4，toolbox，附加功能

toolbox: {	
      show: true,//是否显示
      feature: {
        dataView: {//转换为表格
        	show: true
        },
        restore: {//还原，复位，恢复第一次的样子
        	show: true
        },
        saveAsImage: {//下载，保存为图片
        	show: true
        },
        dataZoom:{//局部数据缩放
        	show:true
        },
	    magicType: {//折线图柱状图等等切换
	        type: ['line', 'bar', 'stack']
	    }
      }
    },

5，color，图例，内容的颜色

color:'#1F1FF9',//只有一个图例
color:[],//多个就用数组装着，逗号隔开

6，X轴

 xAxis: {
      type: 'time',//轴线格式
      axisLabel: {
        show: true,//标签显示 
        interval:'0' //隔一个显示一个刻度标签
      }
    },

7，Y轴
如果想要双y轴复制一个就可以了

    yAxis: [{
      name:'降水',//名称
      type: 'value',
      position: 'left',//位置
      interval:50, //刻度值每次增加几个
      min:0,//最小值
      max:200,//最大值
      axisLine:{//轴线
        show:true,
        lineStyle:{color:'#35AA36'} //轴线颜色
      },
      axisLabel:{//刻度带单位
       formatter:'{value}mm',
      }
    }]

8，series，数据

series: [{
		stack:'名字',//柱子堆叠，一根柱子显示多种数据，只要名字一样就可以
		barWidth：‘10px’//柱子宽度
		barGap: 0.1,//间隙
		name:"降水量",
		data:[],//值
		type: 'bar',//类型
		 yAxisIndex: 0,  // 通过这个判断左右轴
}, {
        name:"累计降水",
        data: [],
        type: 'line',
        yAxisIndex: 1,
        smooth: true,
        symbolSize: 7,
        areaStyle: {            // 折现下是否填充阴影
			color: {//阴影样式
	          type: 'linear',//类型
	          x: 0,//位置
	          y: 0,
	          x2: 0,
	          y2: 1,
	          colorStops: [{//颜色
	            offset: 1, 
	            color: 'rgba(86,122,210,0.6)'
	          }],
          global: false
        }
	}
}]

最后：如果此篇博文对您有帮助，还请动动小手点点关注点点赞呐~，谢谢 ~ ~

杨同学*

关注

6
点赞
踩
21

收藏

觉得还不错? 一键收藏
打赏
7
评论
Echarts基本的实用属性

大家也可以去Echarts官网查看相关属性：echarts官网，下面都是我在官网中提炼和平时工作中所用到的基本常见属性以及一些特殊属性。基本结构<html> <div id="container" style="width:100px;height:100px"><div></html><script> var chartDom = document.getElementById('container'); var myChart =
复制链接

扫一扫