javascript - 请教这是什么类型的echarts

问题描述

问 题

'use strict';

              var salesChartCanvas = $("#salesChart").get(0).getContext("2d");
              var salesChart = new Chart(salesChartCanvas);
              var salesChartData = {
                labels: ["1日", "2日", "3日", "4日", "5日", "6日", "7日", "8日", "9日", "10日", "11日", "12日", "13日", "14日", "15日", "16日", "17日", "18日", "19日", "20日"
                         , "21日", "22日", "23日", "24日", "25日", "26日", "27日", "28日", "29日", "30日", "31日"],
                datasets: [
                  {
                      label: "Electronics",
                      fillColor: "rgb(210, 214, 222)",
                      strokeColor: "rgb(210, 214, 222)",
                      pointColor: "rgb(210, 214, 222)",
                      pointStrokeColor: "#c1c7d1",
                      pointHighlightFill: "#fff",
                      pointHighlightStroke: "rgb(220,220,220)",
                    data:beian//[59, 65, 80, 81, 56, 55, 40,65, 59, 80, 81, 56, 55, 40,65, 59, 80, 81, 56, 55, 40,65, 59, 80, 81, 56, 55, 40,28, 48, 40]
                  },
                  {
                      label: "Digital Goods",
                      fillColor: "rgba(60,141,188,0.9)",
                      strokeColor: "rgba(60,141,188,0.8)",
                      pointColor: "#3b8bba",
                      pointStrokeColor: "rgba(60,141,188,1)",
                      pointHighlightFill: "#fff",
                      pointHighlightStroke: "rgba(60,141,188,1)",
                    data:lengen  //[28, 19, 27, 48, 40, 86, 90, 48, 40, 19, 27,28, 86, 90,28, 27,48, 40, 19, 86, 90,28, 48, 40, 19, 27, 86, 90,0,0,0]  
                  }
                ]
              };
              var salesChartOptions = {
                showScale: true,
                scaleShowGridLines: false,
                scaleGridLineColor: "rgba(0,0,0,.05)",
                scaleGridLineWidth: 1,
                scaleShowHorizontalLines: true,
                scaleShowVerticalLines: true,
                bezierCurve: true,
                bezierCurveTension: 0.3,
                pointDot: false,
                pointDotRadius: 4,
                pointDotStrokeWidth: 1,
                pointHitDetectionRadius: 20,
                datasetStroke: true,
                datasetStrokeWidth: 2,
                datasetFill: true,
                legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].lineColor%>\"></span><%=datasets[i].label%></li><%}%></ul>",
                maintainAspectRatio: true,
                responsive: true
              };

              //Create the line chart
              salesChart.Line(salesChartData, salesChartOptions);
            
        }
        
        
        
        
        
图片

解决方案

应该是

{
    type: 'line',  //折线图
    smooth:true, //曲线平滑
    areaStyle: {normal: {opacity:0.1}}, //区域填充样式
}

areaStyle参数文档

这篇关于javascript - 请教这是什么类型的echarts的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！