#信息可视化# echarts入门学习零基础（一）

最新推荐文章于 2022-02-10 14:24:49 发布

置顶孤独叶

最新推荐文章于 2022-02-10 14:24:49 发布

阅读量846

点赞数 1

文章标签：数据可视化前端

本文链接：https://blog.csdn.net/qq_45044477/article/details/106170272

版权

一、首先零基础学习怎么开始啊？**

首先先做个小项目，从项目中体会做法。
项目做成之后会有小小的成就感，这时再去看文档学习，会添加兴趣，使得学习不那么枯燥。
熟悉知识之后就是做练习、专研技术。

二、下载

e-charts下载我们去官网下载echarts官网

我们选择定制自己想要的样式模板，会跳到下面界面

接下来选择自己想要的模板样式，这里我们选的柱状、折线等

可以填上我们邮箱地址（不填也行）

等它打包好浏览器会自动下载

三、入门小项目

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="js/echarts.min.js"></script>   
         *<!--把echarts导入进去-->*
  </head>
  <body>
       <div id="main" style="height:400px"></div>
          *<!--写个div容器-->*
          <script>
               var myChart = echarts.init(document.getElementById('main'));
               //初始化实例
	             var dataIPSxAxis = ['2020 5/01  ', '2020 5/02', '2020 5/03', '2020 5/04 ', '2020 5/05 ', '2020 05/06'];
				 var dataIPS = [20, 60, 50, 80, 120, 100];
				 var dataIPS2 = [30, 50, 60, 80, 20, 90];
				 option = {
				       title : {
				        text: '合肥将雨量',
				        subtext: '数据纯属虚构',
				        textStyle:{
				            color:"#fff"
				        }
				    },
				     backgroundColor:"#273c75", //背景颜色
				     tooltip: {
				         trigger: 'axis',
				         axisPointer: {
				             type: 'cross',
				             label: {
				                 backgroundColor: '#6a7985',
				             },
				         }
				     },
				     color: ["#0080ff", "#4cd5ce"],
				     toolbox: {
				         // feature: {
				         //     saveAsImage: {}
				         // }
				     },
				     grid: {
				         left: '5%',
				        right: '5%',
				        top:'10%',
				        bottom: '5%',
				         containLabel: true
				     },
				     xAxis: [{      //x轴
				         type: 'category',
				         boundaryGap: false,
				         data: dataIPSxAxis,
				         axisLabel: {
				             show: true,
				             textStyle: {
				                 color: '#6ba1bb',
				                 fontSize: 12,
				             },
				             formatter: function(value) {
				                 //debugger
				                 var ret = ""; //拼接加\n返回的类目项
				                 var maxLength = 5; //每项显示文字个数
				                 var valLength = value.length; //X轴类目项的文字个数
				                 var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
				                 if (rowN > 1) //如果类目项的文字大于3,
				                 {
				                     for (var i = 0; i < rowN; i+=2) {
				                         var temp = ""; //每次截取的字符串
				                         var start = i * maxLength; //开始截取的位置
				                         var end = start + maxLength; //结束截取的位置
				                         //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
				                         temp = value.substring(start, end) + "\n";
				                         ret += temp; //凭借最终的字符串
				                     }
				                     return ret;
				                 } else {
				                     return value;
				                 }
				             },
				         },
				         axisLine: {
				             lineStyle: {
				                 color: '#0a2b52',
				                 width: 1, //这里是为了突出显示加上的
				             }
				         }
				     }],
				     yAxis: [{
				         type: 'value',
				         axisLine: {
				             onZero: false,
				             lineStyle: {
				                 color: '#0a2b52',
				                 width: 1, //这里是为了突出显示加上的
				             }
				         },
				         
				         axisLabel: {
				             formatter: function(val) {
				                 return val + '';
				             },
				             show: true,
				             textStyle: {
				                 color: '#6ba1bb' //字体颜色
				             }
				         },
				          splitLine:{
				                show:true,
				                lineStyle:{
				                    type:'dashed'
				                    
				                }
				                
				            },
				     }],
				     series: [
				         {
				             name: '最高水量',
				             type: 'line',
				             smooth: true,
				             //symbol: "none", //去掉折线点
				             stack: 100,
				             itemStyle: {
				                 normal: { //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
				                     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
				                         offset: 0,
				                         color: '#CB8993' // 0% 处的颜色
				                     }, {
				                         offset: 0.5,
				                         color: '#CB8993' // 100% 处的颜色
				                     }, {
				                         offset: 1,
				                         color: '#CC56CB' // 100% 处的颜色
				                     }]), //背景渐变色
				                     lineStyle: { // 系列级个性化折线样式
				                         width: 0.5,
				                         type: 'solid',
				                         color: "#CC56CB"
				                     }
				                 },
				                 emphasis: {
				                     color: '#02675f',
				                     lineStyle: { // 系列级个性化折线样式
				                         width: 0.5,
				                         type: 'dotted',
				                         color: "#02675f" //折线的颜色
				                     }
				                 }
				             }, //线条样式
				             symbolSize: 5, //折线点的大小
				             areaStyle: {
				                 normal: {}
				             },
				             data: dataIPS,
				         },
				
				     {
				             name: '最低水量',
				             type: 'line',
				             smooth: true,
				             //symbol: "none", //去掉折线点
				             stack: 100,
				             itemStyle: {
				                 normal: { //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
				                     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
				                         offset: 0,
				                         color: '#8c7ae6' // 0% 处的颜色
				                     }, {
				                         offset: 0.5,
				                         color: '#8c7ae6' // 100% 处的颜色
				                     }, {
				                         offset: 1,
				                         color: '#0078D7' // 100% 处的颜色
				                     }]), //背景渐变色
				                     lineStyle: { // 系列级个性化折线样式
				                         width: 0.5,
				                         type: 'solid',
				                         color: "#0078D7"
				                     }
				                 },
				                 emphasis: {
				                     color: '#02675f',
				                     lineStyle: { // 系列级个性化折线样式
				                         width: 0.5,
				                         type: 'dotted',
				                         color: "#02675f" //折线的颜色
				                     }
				                 }
				             }, //线条样式
				             symbolSize: 5, //折线点的大小
				             areaStyle: {
				                 normal: {}
				             },
				             data: dataIPS2,
				         },]
				 };
				 // 使用刚指定的配置项和数据显示图表。
                  myChart.setOption(option);
          </script>
          
  </body>

下面就是项目的具体截图
在这里插入图片描述

孤独叶

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
#信息可视化# echarts入门学习零基础（一）

一、首先零基础学习怎么开始啊？**首先先做个小项目，从项目中体会做法。项目做成之后会有小小的成就感，这时再去看文档学习，会添加兴趣，使得学习不那么枯燥。熟悉知识之后就是做练习、专研技术。二、下载e-charts下载我们去官网下载echarts官网我们选择定制自己想要的样式模板，会跳到下面界面接下来选择自己想要的模板样式，这里我们选的柱状、折线等可以填上我们邮箱地址（不填也行）等它打包好浏览器会自动下载三、入门小项目<!DOCTYPE html><h
复制链接

扫一扫