ECharts折线图的使用方式

最新推荐文章于 2024-08-01 12:00:00 发布

qq_40974141

最新推荐文章于 2024-08-01 12:00:00 发布

阅读量1.9k

点赞数 1

分类专栏：前端文章标签：折线图

本文链接：https://blog.csdn.net/qq_40974141/article/details/84136662

版权

ECharts折线图的使用方式，参照下面的折线图就能看懂代码了

<script type="text/javascript" src="../static/js/echarts.min.js"></script>
<script>
//获取给折线图准备的容器id
var dom = document.getElementById("advertEcharts");
var myChart = echarts.init(dom);
var app = {};
option = null;
app.title = '广告统计';

var colors = ['#5793f3', '#d14a61', '#675bba'];


option = {
    color: colors,

    tooltip: {
        //开启tips框框
        trigger: 'axis'
        //刻度跟随鼠标显示
        //axisPointer: {type: 'cross'}
    },
    legend: {
        //设置图例
        data:['播放次数', '广告主数', '预估收益'],
        //设置右对齐
        left:'right'
    },
    //设置折线图大小
    grid: {
        top: 70,
        left:60,
        right:30,
        bottom: 50
    },
    //设置x轴
    xAxis: [
        {
            type: 'category',
            axisTick: {
                alignWithLabel: t