【备忘】EChart 标题 title 样式，x轴、y轴坐标显示，调整图表位置等

╰+哭是因爲堅強的太久メ 2022-05-19 06:12 953阅读 0赞

![这里写图片描述][70]

示例里工作一般情况是够用了，更复杂的可以查询教程：

title 官方解说：http://echarts.baidu.com/option.html\#title

坐标相关： X轴：http://echarts.baidu.com/option.html\#xAxis

坐标相关： Y轴：http://echarts.baidu.com/option.html\#yAxis

表格部分：http://echarts.baidu.com/option.html\#grid

<script>
        function getChartsLine() {
    
            var myChart = echarts.init(document.getElementById('progress'),'macarons');
    
            var option = {
                title: {
                    text: 'xx折线图',      //主标题
                    textStyle:{
                        color:'#0DB9F2',        //颜色
                        fontStyle:'normal',     //风格
                        fontWeight:'normal',    //粗细
                        fontFamily:'Microsoft yahei',   //字体
                        fontSize:14,     //大小
                        align:'center'   //水平对齐
                    },
                    subtext:'xx副标题',      //副标题
                    subtextStyle:{          //对应样式
                        color:'#F27CDE',
                        fontSize:14
                    },
                    itemGap:7
                },
                grid:{          //显示数据的图表位于当前canvas的坐标轴
                    x:50,
                    y:55,
                    x2:50,
                    y2:60,
                    borderWidth:1
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data:["图一用","图二用"]
                },
                toolbox: {
                    show: true,
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis:  {
                    type: 'category',
                    boundaryGap: false,
                    data: ["2015-1", "2015-2", "2015-3", "2015-4", "2015-5", "2015-6", "2015-7", "2015-8", "2015-9", "2015-10", "2015-11", "2015-12"]
                },
                yAxis: {
                    type: 'value',
                    
                    //默认以千分位显示，不想用的可以在这加一段
                    axisLabel : {   //调整左侧Y轴刻度， 直接按对应数据显示
                        show:true,
                        showMinLabel:true,
                        showMaxLabel:true,
                        formatter: function (value) {
                            return value;
                        }
                    }
                },
                series: [
                    {
                        name:"计划",
                        type:'line',
                        data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 300, 2.3],
                        markPoint: {
                            data: [
                                {type: 'max', name: '最大值'},
                                {type: 'min', name: '最小值'}
                            ]
                        },
                        markLine: {
                            data: [
                                {type: 'average', name: '平均值'},
                                [{
                                    symbol: 'none',
                                    x: '90%',
                                    yAxis: 'max'
                                }, {
                                    symbol: 'circle',
                                    label: {
                                        normal: {
                                            position: 'start',
                                            formatter: '最大值'
                                        }
                                    },
                                    type: 'max',
                                    name: '最高点'
                                }]
                            ]
                        }
                    },
                    {
                        name:"实际",
                        type:'line',
                        data:[0, 0, 37, 0, 0, 15, 3036, 5572, 0, 0, 0, 0],
                        markPoint: {
                            data: [
                                {type: 'max', name: '最大值'},
                                {type: 'min', name: '最小值'}
                            ]
                        },
                        markLine: {
                            data: [
                                {type: 'average', name: '平均值'},
                                [{
                                    symbol: 'none',
                                    x: '90%',
                                    yAxis: 'max'
                                }, {
                                    symbol: 'circle',
                                    label: {
                                        normal: {
                                            position: 'start',
                                            formatter: '最大值'
                                        }
                                    },
                                    type: 'max',
                                    name: '最高点'
                                }]
                            ]
                        }
                    }
                ]
            };
            myChart.setOption(option);
        }
    
        getChartsLine();
    </script>

![这里写图片描述][70 1]

### 修改后： ###

![这里写图片描述][70 2]

[70]: /images/20220519/584dae8011854be48d4d0195a0f5e1c9.png
[70 1]: /images/20220519/4b9b04c8837c4ab7b863a8b2863a2892.png
[70 2]: /images/20220519/b953d4a3bfcf4f0dab7b50b7b27da3a0.png

发表评论取消回复

表情：

评论列表（有 0 条评论，953人围观）

还没有评论，来说两句吧...

相关阅读

相关 echarts 隐藏y轴x轴刻度

效果图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmN

以你之姓@/ 2022年12月09日 01:54/ 0 赞/ 370 阅读

相关 echarts对Y轴坐标控制

echarts自定义y轴刻度信息 <!DOCTYPE html> <html> <head> <meta charset="utf

待我称王封你为后i/ 2022年11月18日 13:54/ 0 赞/ 227 阅读

相关 Vue echarts 修改 X轴、Y轴样式以及文字样式

前言：做数据统计图的时候总结了一下修改样式的东西 x轴 ------xAxis y轴 ------yAxis 数据 -----series 先来样式对

淡淡的烟草味﹌/ 2022年11月12日 14:52/ 0 赞/ 1119 阅读

相关双Y轴echarts

[https://www.makeapie.com/editor.html?c=xE1oQek3jr][https_www.makeapie.com_editor.html_c

待我称王封你为后i/ 2022年11月10日 14:17/ 0 赞/ 266 阅读

相关 echarts柱形图x轴y轴的字体大小颜色调整

echarts柱形图x轴y轴的字体大小颜色调整 y轴字体颜色设置 y轴字体颜色设置 yAxis: {

╰半橙微兮°/ 2022年11月06日 15:59/ 0 赞/ 757 阅读

相关如何使用echarts给y轴x轴添加单位

如何使用echarts给y轴x轴添加单位 y轴每个单位刻度加单位使用 y轴顶部设置单位 x轴添加单位 y轴每个单位刻度加单位使

逃离我推掉我的手/ 2022年11月02日 15:27/ 0 赞/ 391 阅读

相关 echarts X轴Y轴鼠标滑动放大缩小

option = { title: { text: '' }, tooltip: {

朱雀/ 2022年10月23日 08:12/ 0 赞/ 403 阅读

相关 VUE之Echarts图表x轴y轴提示文字过长处理为省略号

只需对显示文字格式修改即可 yAxis: { type: 'category', axisLine: {

心已赠人/ 2022年10月19日 15:59/ 0 赞/ 194 阅读

相关【备忘】EChart 标题 title 样式，x轴、y轴坐标显示，调整图表位置等

![这里写图片描述][70] 示例里工作一般情况是够用了，更复杂的可以查询教程： title 官方解说：http://echarts.baidu.com/option.ht

╰+哭是因爲堅強的太久メ/ 2022年05月19日 06:12/ 0 赞/ 954 阅读

相关 Echart 数据更新了,X轴或者Y轴显示不变化的问题

Echart 数据更新了,X轴或者Y轴显示不变化的问题应用场景：echart图表已经init后，有时候需要动态的修改X轴或者Y轴的数据，比如点击不同的图例，显示不同的X

梦里梦外;/ 2021年07月24日 17:39/ 0 赞/ 1601 阅读