echarts-设置折线图中折线线条颜色和折线点颜色

最新推荐文章于 2024-04-09 17:14:01 发布

baitao1932

最新推荐文章于 2024-04-09 17:14:01 发布

阅读量929

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wsir/p/6236677.html

版权

本文介绍了如何在Echarts中自定义折线图的线条颜色和折点颜色，提供了相应的配置代码，包括lineStyle和itemStyle的设置方法，详细展示了设置后的效果。

摘要由CSDN通过智能技术生成

1、问题背景

设计一条折线图，但是图形中不用插件自带的颜色，需要自定义线条和折点的颜色

2、实现源码

（1）图形自分配颜色

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="UTF-8">  
        <title>echarts-设置折线图中折线线条颜色和折线点颜色</title>  
        <link rel="shortcut icon" href="../js/echarts-2.2.7/doc/asset/ico/favicon.png">  
        <script type="text/javascript" src="../js/echarts-2.2.7/doc/asset/js/jquery.min.js" ></script>  
        <script type="text/javascript" src="../js/echarts-2.2.7/doc/example/www2/js/echarts-all.js" ></script>  
        <style>  
            body,html{
      
                width: 99%;  
                height: 99%;  
                font-family: "微软雅黑";  
                font-size: 12px;  
            }  
            #line{
      
                width: 100%;  
                height: 100%;  
            }  
        </style>  
        <script>  
            $(function(){  
                var chart = document.getElementById('line');    
                var echart = echarts.init(chart);   
                  
                var option = {  
                    title: {  
                        text: ''  
                    },  
                    tooltip: {  
                        trigger: 'axis'  
                    },  
                    legend: {  
                        data:['销售量']  
                    },  
                    grid: {  
                        left: '3%',  
                        right: '4%',  
                        bottom: '3%',  
                        containLabel: true  
                    },  
                    toolbox: {  
                        feature: {  
                            saveAsImage: {}  
                        }  
                    },  
                    xAxis: {  
                        type: 'category'