echart常用直/曲折线图

youqitt

于 2020-05-06 18:29:56 发布

阅读量1.5k

点赞数

分类专栏：前端知识文章标签： javascript

本文链接：https://blog.youkuaiyun.com/weixin_41195867/article/details/105956571

版权

前端知识专栏收录该内容

19 篇文章

订阅专栏

本文详细介绍了如何使用ECharts库在JavaScript中创建各种直线图和曲线图，包括折线图、柱状图和散点图等。通过实例代码，读者将学习到ECharts的基本用法及数据绑定，掌握图表的动态更新和交互功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//<div style="width: 100%;height: 220px" id="chart1"></div>
var myChart = echarts.init(document.getElementById('chart1'));
    option = {
        xAxis: {
            type: 'category',
            data: ["三月","四月","五月"]
        },
        yAxis: {
            type: 'value'
        },
        grid:{//图表上下左右边距
            x:50,
            y:30,
            x2:30,
            y2:30
        },
        tooltip: {
            trigger: 'axis'  //点击展示点
        },
        dataZoom: [{
            type: 'inside',
            show: false,
            realtime: true,
            start: 0,//缩放条从0开始
            end: 50  //缩放结束的百分比0-100
        }],
        series: [{
            data: yAxis,
            type: 'line',
            smooth: true,  //true 为平滑曲线，false为直线
            itemStyle: {
                normal: {
                    color: '#ff6600'
                }
            }
        }],
        formatter: function (params) {//处理自定义展示的数值
            var res = params[0].value+"mA";
            return res;
        }
    };

    // 使用刚指定的配置项和数据显示图表。
    window.onresize = myChart.resize;
    myChart.setOption(option);