Echarts之折线图样式

最新推荐文章于 2025-05-19 11:38:42 发布

原创

最新推荐文章于 2025-05-19 11:38:42 发布 · 1.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#js #css #html5

本文详细介绍了如何使用Echarts库创建并定制折线图的样式，包括HTML布局、CSS样式调整和JavaScript代码实现。通过实例展示了Echarts在数据可视化中的强大功能。

Echarts之折线图样式

html部分

 <div id="brokenline"></div>

css部分

 #brokenline {
   
   
            position: absolute;
            top: 68px;
            left: 15px;
            width: 1503px;
            height: 334px;
        }

js部分

  <script>
        var myChart = echarts.init(document.getElementById('brokenline'));
        var option = {
   
   
            tooltip: {
   
   
                trigger: 'axis'
            },
            //图表部分
            legend: {
   
   
                top: 0,
                right: 260,
                data: [{
   
   
                    name: '已处理告警',
                    icon: 'line',
                    textStyle: {
   
   
                        fontSize: 12,
                        color: '#fc41a8'
                    },
                }, {
   
   
                    name: '全部告警',
                    icon: 'line',
                    textStyle: {
   
   
                        fontSize: 12,
                        color:</