echarts 图表X, Y轴添加标题

主要是添加一个name属性就可以显示出来了。

 

代码如下:

option = {
    title: {
        text: '折线图堆叠'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        name:'日期',  //X轴标题
        type: 'category',
        boundaryGap: false,
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
        name:'数量', //Y轴标题
        type: 'value'
    },
    series: [
        {
            name: '邮件营销',
            type: 'line',
            stack: '总量',
            data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
            name: '联盟广告',
            type: 'line',
            stack: '总量',
            data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
            name: '视频广告',
            type: 'line',
            stack: '总量',
            data: [150, 232, 201, 154, 190, 330, 410]
        },
        {
            name: '直接访问',
            type: 'line',
            stack: '总量',
            data: [320, 332, 301, 334, 390, 330, 320]
        },
        {
            name: '搜索引擎',
            type: 'line',
            stack: '总量',
            data: [820, 932, 901, 934, 1290, 1330, 1320]
        }
    ]
};

最后为了方便大家的沟通与交流请加QQ群: 625787746

请进QQ群交流:【IT博客技术分享群①】:https://jq.qq.com/?_wv=1027&k=DceI0140

  • 5
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
以下是一个使用 Ajax 加载数据并且拥有多个 Y 轴的 Echarts 示例: HTML 代码: ```html <div id="chart" style="width: 100%; height: 500px;"></div> ``` JavaScript 代码: ```javascript // 初始化 echarts 实例 var myChart = echarts.init(document.getElementById('chart')); // 指定图表的配置项和数据 var option = { title: { text: '多 Y 轴示例' }, tooltip: { trigger: 'axis' }, legend: { data:['蒸发量','降水量','平均温度'] }, toolbox: { feature: { dataView: {show: true, readOnly: false}, magicType: {show: true, type: ['line', 'bar']}, restore: {show: true}, saveAsImage: {show: true} } }, xAxis: [ { type: 'category', data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'] } ], yAxis: [ { type: 'value', name: '蒸发量', min: 0, max: 250, interval: 50, axisLabel: { formatter: '{value} ml' } }, { type: 'value', name: '降水量', min: 0, max: 250, interval: 50, axisLabel: { formatter: '{value} ml' } }, { type: 'value', name: '平均温度', min: 0, max: 25, interval: 5, axisLabel: { formatter: '{value} °C' } } ], series: [ { name:'蒸发量', type:'bar', data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3] }, { name:'降水量', type:'bar', yAxisIndex: 1, data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3] }, { name:'平均温度', type:'line', yAxisIndex: 2, data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 19.5, 11.2, 6.5, 4.3] } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); // 使用 jQuery 的 ajax 加载数据 $.get('data.php').done(function (data) { // 将 json 字符串转换成对象 data = JSON.parse(data); // 更新图表的数据 myChart.setOption({ series: [ { name:'蒸发量', type:'bar', data:data.evaporation }, { name:'降水量', type:'bar', yAxisIndex: 1, data:data.precipitation }, { name:'平均温度', type:'line', yAxisIndex: 2, data:data.temperature } ] }); }); ``` 以上代码中,我们指定了一个多 Y 轴的 Echarts 图表,并使用 jQuery 的 Ajax 加载了一个外部数据文件 `data.php` 中的数据。在数据加载完成后,我们使用 `setOption` 方法更新了图表的数据。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

IT博客技术分享

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值