Echarts从入门到画两折线图+面积图+不同区域不同颜色

WLDLSW

已于 2023-07-05 13:50:43 修改

阅读量1.6k

点赞数 1

文章标签： echarts chrome 前端

于 2023-07-05 13:43:55 首次发布

本文链接：https://blog.csdn.net/WLDLSW/article/details/131545923

版权

先放一张最终实现效果图
在这里插入图片描述
一、前言
本来是想用PPT或者EXCEL实现曲线图+面积图，奈何需要平滑的曲线+面积图，找遍全网（也可能是我检索力度不够）发现只有Echarts能快速实现，因此现学现卖了……

二、安装Echarts
参考两个博主的内容，
安装详细步骤在此
 具体理解如何用在此

结合这两个教程，就是把我们编写好的html文件放到dist文件夹里，再双击就能直接出图。我的路径是[D:\sofewares\echarts-5.4.2\echarts-5.4.2\dist]

编写html文件，我使用的是notpad++

三、从入门到基本入门
基本图如何画，参考这个教程及他的Echarts系列教程
总的来说，所需的html文件内容包括三个部分
第一：引入echarts.min.js
第二：准备容器，类似于设置画板大小
第三：画图参数设置调整（基本就是基于模板，具体画图需求具体调整参数细节）

关于设置画图数据有两种方法，第一中是设置在html文档中（适合数据少的模式），第二种是单独设置一个data.js文件，在html中调用该文件即可，适合数据量多的情况（data.js 这个文件data是文件名，可以按需求改名称，对应的，html倒数第三行也要相应改变；另外，data.js文件也要放置在dist文件夹中），详见上述入门教程。

以下html文件采用的是数据调用的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 500px;height: 300px;"></div>
    <script type="text/javascript">
        var mydata=function(data){
            var mycharts=echarts.init(document.getElementById("main"));
            var option={
                //backgroundColor: '#2c343c', 调节背景色，这里我注释掉了
                title:{
                    text:'测试'
                },
                tooltip:{},
                legend:{
                    data:['test']
                },
                xAxis:{
                    type:'category',        //坐标轴类型：类目轴
                    boundaryGap:false,      //1.基础面积图  ：类目轴中：留白区域，与左边坐标轴和右边图的边缘之间是否有留白。默认true
                    data:data.data,
                    axisTick:{
                        show: true, //显示坐标轴刻度线
                        inside: true //显示刻度线朝内
                    }
                },
                yAxis:{
                    minInterval:0.2,
                    type:'value',        //坐标轴类型：数值轴
                    axisTick:{
                        show: true, //显示坐标轴刻度线
                        inside: true
                    },
                    axisLine: {
                        show: true, //显示坐标轴线
                    },
                    axisLabel: {
                        show: true, //显示坐标轴上的文字
                    },
                    splitLine:{
                        "show": false
                    }
                },
                series:[{
                    name:'test',
                    type:'line',
                    symbol: 'none',  // 不显示曲线每个点的小圆点
                    lineStyle : {
                        color : '#C82423',
                        width : 1,  //设置曲线宽度
                        type : 'solid',
                },
                    data:data.zhi,
                    smooth:true,        //平滑曲线图。值可为数字
                    areaStyle:{         //2.基础面积图。区域填充样式
                        color:'#B22222'    //支持RGB、ALPHA通道+RGBA、十六进制、渐变色、纹理填充
                    }        
                },{
                    name:'test',
                    type:'line',
                    symbol: 'none',
                    lineStyle : {
                        color : '#2878B5',
                        width : 1,
                        type : 'solid',
                },
                    data:data.zhi1,
                    smooth:true,        //平滑曲线图。值可为数字
                    areaStyle:{         //2.基础面积图。区域填充样式
                        color:'#458B00'    //支持RGB、ALPHA通道+RGBA、十六进制、渐变色、纹理填充
                    }        
                }]
            };

            mycharts.setOption(option);
        }
    </script>
    <script src="data.js"></script>
</body>
</html>

数据文件在此：

//data.js
mydata(
{
    "data":[7, ,8, ,9, ,10, ,11],
    "zhi":[0,0,0.05,0.15,0.18,0.7,0.1,0.05,0],
	"zhi1":[0.03,0.05,0.15,0.2,0.2,0.45,0.05,0.03,0]
}
)

至于如何做到了不同区域不同颜色，这个是Echarts很有优势的一点，给两个曲线的区域设置不同颜色，两者重合的部分颜色会自动叠加，如果不想要着这种效果，把覆盖颜色设置为浅色系即可。

最后，这个图其实还有可以改进的地方，比如横坐标中有中文如何显示出来，两条曲线的图例还可以进一步设置。但是目前需求已达到，所以以后有空再精进吧。
最后的最后，想要提醒一点，Echarts从毫无接触到稍微入门，即使借助如此发达的互联网，也是需要自己沉下心，舍得花时间才能做到的；急于求成、复制代码就直接得到自己想要的图那是不可能实现的。
放平心态吧，慢慢来，才会快。