Echarts常用配置参数

最新推荐文章于 2024-05-31 22:21:30 发布

高堂明镜悲白发

最新推荐文章于 2024-05-31 22:21:30 发布

阅读量1.3k

点赞数

分类专栏： Vue与GIS 文章标签： echarts 前端

本文链接：https://blog.csdn.net/ashtyukjhf/article/details/117162045

版权

Vue与GIS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

完整页面模板

<!--
    THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/zh/editor.html?c=line-simple
-->
<!DOCTYPE html>
<html style="height: 100%">
    <head>
        <meta charset="utf-8">
    </head>
    <body style="height: 100%; margin: 0">
        <div id="container" style="height: 100%"></div>

        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>

        <script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};

var option;

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line'
    }]
};

if (option && typeof option === 'object') {
    myChart.setOption(option);
}

        </script>
    </body>
</html>

最简配置

option = {
    xAxis: {
        type: 'category',
        data: [2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018]
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [14, 6, 14, 12, 14, 20, 24, 16, 17, 20, 15, 26, 26, 33, 51, 49, 40, 80, 57],
        type: 'line'
    }]
};

标题

title: {
        text: '雨量流量关系图',
        subtext: '数据来自西安兰特水电测控技术有限公司',
        left: 'center'
    },

图例

legend: {
        data: ['A', 'B', 'C']
    },

边距

grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },

浮动提示

tooltip: {
	        trigger: 'axis',
					formatter: "{a}<br/>{b}:{}%",
	        axisPointer: {
	            type: 'line', // 默认为直线，可选为：'line' | 'shadow'
	            lineStyle: {
	                color: 'rgba(0,0,0,0.2)',
	                width: 1,
	                type: 'solid'
	            }
	        }
	    },

坐标

xAxis: {
        type: 'value',
        axisLabel: {
            formatter: '{value} °C'
        }
    },
    yAxis: {
        type: 'category',
        axisLine: {onZero: false},
        axisLabel: {
            formatter: '{value} km'
        },
        boundaryGap: true,
        data: ['0', '10', '20', '30', '40', '50', '60', '70', '80']
    },

工具箱

toolbox: {
        feature: {
            dataView: {readOnly: false},
            restore: {},
            saveAsImage: {}
        }
    },

自定义单个元素


option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, { // 将某个数据作为对象处理
            value: 200,
            itemStyle: {
                color: '#a90000'
            }
        }, 150, 80, 70, 110, 130],
        type: 'bar'
    }]
};

自定义主题

下载或复制网站上编辑好的主题保存至 .js 文件；
将该文件在 HTML 中引用；
使用 echarts.init(dom, 'customed') 创建图表，第二个参数即为 .js 文件中注册的主题名字。

高堂明镜悲白发

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Echarts常用配置参数

完整页面模板<!DOCTYPE html><html style="height: 100%"> <head> <meta charset="utf-8"> </head>
复制链接

扫一扫