devbox
从前慢现在也慢
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

前端开发工程师——数据可视化

作者：从前慢现在也慢 | 2024-05-23 12:03:23

赞

踩

前端开发工程师——数据可视化

canvas

canvas绘制线段

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9. <style>
  10.     * {
  11.         padding: 0;
  12.         margin: 0;
  13.     }
  14.     canvas {
  15.         border: 1px solid rgb(32, 30, 30);
  16.     }
  17. </style>
  18. <body>
  19.     <!-- canvas画布：双闭合标签 -->
  20.     <!-- canvas默认标签宽度与高度 300 * 150 -->
  21.     <!-- 在canvas中添加文字内容没有任何意义，只能通过js -->
  22.     <!-- canvas的高度和宽度只能通过标签属性来设置 -->
  23.     <!-- 不能通过样式设置宽度和高度 -->
  24.     <canvas width="600" height="400"></canvas>
  25. </body>
  26. </html>
  27. <script>
  28.     // 通过js当中的笔去完成
  29.     let canvas = document.querySelector('canvas');
  30.     // 获取画布的笔（上下文）
  31.     let ctx = canvas.getContext('2d');
  32.     // 可以获取一些方法对象
  33.     // console.log(ctx)
  34.     // 绘制线段：绘制线段起点设置
  35.     ctx.moveTo(100,100);
  36.     // 其他点设置
  37.     ctx.lineTo(100,200);
  38.     ctx.lineTo(200,100);
  39.     // 设置图形的填充的颜色，下面的fill是一起的
  40.     ctx.fillStyle = 'red';
  41.     ctx.fill();
  42.     // 设置线段的颜色
  43.     ctx.strokeStyle = 'pink';
  44.     // 设置线段的宽度
  45.     ctx.lineWidth = '20';
  46.     // closePath方法表示起点和最终结束点的连接
  47.     ctx.closePath();
  48.     // stroke方法表示起点的其他点的连接
  49.     ctx.stroke();
  50. </script>

 canvas绘制矩形

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9. <style>
  10.     * {
  11.         padding: 0;
  12.         margin: 0;
  13.     }
  14.     canvas {
  15.         border: 1px solid rgb(32, 30, 30);
  16.     }
  17. </style>
  18. <body>
  19.     
  20.     <canvas width="600" height="400"></canvas>
  21. </body>
  22. </html>
  23. <script>
  24.     // 获取节点
  25.     let canvas = document.querySelector('canvas');
  26.     // 获取上下文
  27.     let ctx = canvas.getContext('2d');
  28.     // 绘制矩形的第一种方法：参数为x,y,w,h;x:表示距离水平轴的距离，y表示距离上面顶部的距离，w表示100宽度，h表示高度200
  29.     // 这种方法是不能设置填充颜色的
  30.     ctx.strokeRect(100,200,100,200);
  31.     // 第二种：填充矩形，参数和上面一样
  32.     // 注意：必须要在绘制图形之前填充颜色
  33.     ctx.fillStyle = 'skyblue';
  34.     ctx.fill();
  35.     ctx.fillRect(300,200,100,200);
  36.  
  37. </script>

canvas绘制圆形

arc(x,y,redius,startAngle,endAngle,anticlockwise)

  • x:圆心的x坐标
  • y:圆心的y坐标
  • redius:半径
  • startAngle:开始角度
  • endAngle:结束角度
  • anticlockwise：是否逆时针（true）逆时针，false顺时针
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9. <style>
  10.     * {
  11.         padding: 0;
  12.         margin: 0;
  13.     }
  14.     canvas {
  15.         border: 1px solid rgb(32, 30, 30);
  16.     }
  17. </style>
  18. <body>
  19.     
  20.     <canvas width="600" height="400"></canvas>
  21. </body>
  22. </html>
  23. <script>
  24.     // 获取canvas
  25.     let canvas = document.querySelector('canvas')
  26.     // 获取上下文
  27.     let ctx = canvas.getContext('2d')
  28.     // 绘制圆形
  29.     // 开始绘制
  30.     ctx.beginPath();
  31.     // 绘制圆形的方法：x,y,r,起始弧度，结束弧度，是否逆时针，360°=2.PI
  32.     ctx.arc(100,100,50,0,2 * Math.PI,true);
  33.     // 是指填充颜色
  34.     ctx.fillStyle = 'red';
  35.     ctx.fill()
  36.     // 绘制圆
  37.     ctx.stroke();
  38.  
  39.  
  40.     // 绘制第二个圆
  41.     // 注意：弧度有一个计算
  42.     // 2 * PI * 弧度 = 360
  43.     ctx.beginPath();
  44.     ctx.arc(200,200,50,0,1,false);
  45.     ctx.stroke();
  46.  
  47. </script>

清除画布和绘制文字

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9. <style>
  10.     * {
  11.         padding: 0;
  12.         margin: 0;
  13.     }
  14.     canvas {
  15.         border: 1px solid rgb(32, 30, 30);
  16.     }
  17. </style>
  18. <body>
  19.     
  20.     <canvas width="600" height="400"></canvas>
  21. </body>
  22. </html>
  23. <script>
  24.     // 获取节点
  25.     let canvas = document.querySelector('canvas')
  26.     // 获取上下文
  27.     let ctx = canvas.getContext('2d')
  28.     // 绘制矩形
  29.     ctx.fillRect(100,200,100,200);
  30.     // 清除画布
  31.     // 清除全部画布
  32.     // ctx.clearRect(0,0,600,400);
  33.     // 清除部分画布
  34.     // 表示x,y,宽度50，高度100
  35.     ctx.clearRect(100,200,50,100);
  36.     // 绘制文字
  37.     // 设置文字大小
  38.     ctx.font = "20px 微软雅黑";
  39.     ctx.fillStyle = 'red';
  40.     // 绘制文字
  41.     // 参数表示：需要的文字，x,y坐标
  42.     ctx.fillText("数据可视化",50,20)
  43.  
  44. </script>

绘制柱状图

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9. <style>
  10.     * {
  11.         padding: 0;
  12.         margin: 0;
  13.     }
  14.     /* canvas {
  15.         border: 1px solid rgb(201, 109, 109);
  16.     } */
  17. </style>
  18. <body>
  19.     
  20.     <canvas width="800" height="420"></canvas>
  21. </body>
  22. </html>
  23. <script>
  24.     // 获取节点
  25.     let canvas = document.querySelector('canvas');
  26.     // 获取上下文
  27.     let ctx = canvas.getContext('2d');
  28.     // 绘制文字
  29.     ctx.font = '16px 微软雅黑';
  30.     ctx.fillText('数据可视化',50,80);
  31.     // 绘制主线
  32.     ctx.moveTo(100,100);
  33.     ctx.lineTo(100,400);
  34.     ctx.lineTo(700,400);
  35.     // 连接点
  36.     ctx.stroke();
  37.  
  38.     // 其他线
  39.     ctx.moveTo(100,100);
  40.     ctx.lineTo(700,100);
  41.     ctx.fillText('150',70,110);
  42.     ctx.moveTo(100,160);
  43.     ctx.lineTo(700,160);
  44.     ctx.fillText('120',70,170);
  45.     ctx.moveTo(100,220);
  46.     ctx.lineTo(700,220);
  47.     ctx.fillText('90',70,230);
  48.     ctx.moveTo(100,280);
  49.     ctx.lineTo(700,280);
  50.     ctx.fillText('60',70,290);
  51.     ctx.moveTo(100,340);
  52.     ctx.lineTo(700,340);
  53.     ctx.fillText('30',70,350);
  54.     ctx.fillText('0',80,400);
  55.     ctx.stroke();
  56.  
  57.     // 绘制水平轴底部的线
  58.     ctx.moveTo(250,400);
  59.     ctx.lineTo(250,410);
  60.     // 底部的文字
  61.     ctx.fillText('食品',170,415);
  62.     ctx.moveTo(400,400);
  63.     ctx.lineTo(400,410);
  64.     ctx.fillText('数码',310,415);
  65.     ctx.moveTo(550,400);
  66.     ctx.lineTo(550,410);
  67.     ctx.fillText('服饰',460,415);
  68.     ctx.fillText('箱包',600,415);
  69.     ctx.stroke();
  70.  
  71.     // 绘制矩形
  72.     ctx.fillStyle = 'red'
  73.     ctx.fillRect(120,200,100,200)
  74. </script>

svg 基本使用

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9. <style>
  10.     * {
  11.         margin: 0;
  12.         padding: 0;
  13.     }
  14.     .box {
  15.         width: 800px;
  16.         height: 800px;
  17.     }
  18. </style>
  19. <body>
  20.     <!-- svg双闭合标签：默认宽度和高度300*150，svg绘制图形务必在svg标签内部绘制图形 -->
  21.     <svg class="box">
  22.         <!-- x1 y1第一个点的坐标，x2 y2第二个点的坐标，stroke表示绘制
  23.         line标签用于绘制直线
  24.         -->
  25.         <line x1="100" y1="100" x2="200" y2="200" stroke="red"></line>
  26.         <!-- 绘制折线 -->
  27.         <!-- <polyline points="x1 y1 x2 y2 x3 y3"></polyline> -->
  28.         <!-- 折线默认是填充黑色，fill-opacity去除填充，stroke表示折线颜色 -->
  29.         <polyline points="300 300, 50 100, 120 400" fill-opacity="0" stroke="cyan"></polyline>
  30.         <!-- 绘制矩形 -->
  31.         <!-- fill属性：表示填充颜色 -->
  32.         <rect x="400" y="400" width="150" height="50" fill="pink"></rect>
  33.         <!-- 绘制圆型 -->
  34.         <!-- cx，cy表示圆心，r半径，style表示样式 -->
  35.         <circle cx="370" cy="95" r="50" style="stroke: black; fill:none" ></circle>
  36.  
  37.         <!-- 绘制椭圆 -->
  38.         <!-- cx,cy表示圆心，rx表示x轴半径，ry表示y轴半径 -->
  39.         <ellipse cx="500" cy="500" rx="100" ry="50" style="fill: black;"></ellipse>
  40.         <!-- 绘制多边形 -->
  41.         <!-- <polygon points="x1 y1, x2 y2, x3 y3"></polygon> -->
  42.         <polygon points="600 100, 300 400, 750 100" stroke="red" fill-opacity="0"></polygon>
  43.  
  44.         <!-- 绘制任意图型 -->
  45.         <!-- M：移动到初始位置 L：画线 Z：将结束和开始点闭合-->
  46.         <!-- <path d="
  47.         M x1 y1
  48.         L x2 y2
  49.         L x3 y3
  50.         Z
  51.         ">
  53.         </path> -->
  54.         <path d="
  55.         M 10 10
  56.         L 400 20
  57.         L 30 120
  58.         L 50 99
  59.         Z
  60.         ">
  61.  
  62.         </path>
  63.     </svg>
  64. </body>
  65. </html>

ECharts

echarts基本使用

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <!-- 引入echarts依赖包 -->
  9.     <script src="https://cdn.staticfile.net/echarts/4.7.0/echarts.min.js"></script>
  10. </head>
  11. <style>
  12.     * {
  13.         margin: 0;
  14.         padding: 0;
  15.     }
  16.     div {
  17.         width: 800px;
  18.         height: 400px;
  19.     }
  20. </style>
  21. <body>
  22.     <!-- 准备一个容器用于显示图标 -->
  23.     <div></div>
  24. </body>
  25. </html>
  26. <script>
  27.     // 基于准备好的dom初始化echarts实例
  28.     let dom = document.querySelector('div');
  29.     // 创建echarts实例
  30.     let mycharts = echarts.init(dom);
  31.     // console.log(mycharts);
  32.     // 指定图表 的配置项与数据
  33.     mycharts.setOption({
  34.         // 图表的标题
  35.         title:{
  36.             // 主标题的设置
  37.             text:'数据可视化',
  38.             // 子标题
  39.             subtext:'echarts基本使用',
  40.             // 主标题的颜色
  41.             textStyle:{
  42.                 color:'cyan'
  43.             },
  44.             // 设置标题的位置
  45.             left:'center',
  46.         },
  47.         // x轴的配置项
  48.         xAxis:{
  49.             // 数据
  50.             // data表示底部数据的设置
  51.             data:['衣服','直播','游戏','电影']
  52.         },
  53.         // y轴的配置项
  54.         yAxis:{
  55.             // 显示y轴的线
  56.             axisLine:{
  57.                 show:true
  58.             },
  59.             // 显示y轴的刻度
  60.             axisTick:{
  61.                 show:true
  62.             },
  63.         },
  64.         // 系列的设置：绘制什么样类型的图表，数据的展示都在这里
  65.         series:[
  66.             {
  67.                 // 图表类型的设置，bar表示柱状图,pie表示饼状图，line折线图
  68.                 type:'bar',
  69.                 data:[10,20,30,40],
  70.                 // 表示柱状图的颜色
  71.                 color:'blue',
  72.             }
  73.         ]
  74.         
  75.     })
  76. </script>

多个容器显示多个表

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <!-- 引入echarts依赖包 -->
  9.     <script src="https://cdn.staticfile.net/echarts/4.7.0/echarts.min.js"></script>
  10. </head>
  11. <style>
  12.     * {
  13.         margin: 0;
  14.         padding: 0;
  15.     }
  16.     div {
  17.         width: 800px;
  18.         height: 400px;
  19.     }
  20. </style>
  21. <body>
  22.     <!--准备一个容器用于显示图标 -->
  23.     <div class="box1"></div>
  24.     <div class="box2"></div>
  25. </body>
  26. </html>
  27. <script>
  28.     // 基于准备好的dom初始化echarts实例
  29.     let dom1 = document.querySelector('.box1');
  30.     let dom2 = document.querySelector('.box2')
  31.     // 创建echarts实例
  32.     let mycharts1 = echarts.init(dom1);
  33.     let mycharts2 = echarts.init(dom2);
  34.     // console.log(mycharts);
  35.     // 指定图表 的配置项与数据
  36.     mycharts1.setOption({
  37.         // 图表的标题
  38.         title:{
  39.             // 主标题的设置
  40.             text:'数据可视化',
  41.             // 子标题
  42.             subtext:'echarts基本使用',
  43.             // 主标题的颜色
  44.             textStyle:{
  45.                 color:'cyan'
  46.             },
  47.             // 设置标题的位置
  48.             left:'center',
  49.         },
  50.         // x轴的配置项
  51.         xAxis:{
  52.             // 数据
  53.             // data表示底部数据的设置
  54.             data:['衣服','直播','游戏','电影']
  55.         },
  56.         // y轴的配置项
  57.         yAxis:{
  58.             // 显示y轴的线
  59.             axisLine:{
  60.                 show:true
  61.             },
  62.             // 显示y轴的刻度
  63.             axisTick:{
  64.                 show:true
  65.             },
  66.         },
  67.         // 系列的设置：绘制什么样类型的图表，数据的展示都在这里
  68.         series:[
  69.             {
  70.                 // 图表类型的设置，bar表示柱状图,pie表示饼状图，line折线图
  71.                 type:'bar',
  72.                 data:[10,20,30,40],
  73.                 // 表示柱状图的颜色
  74.                 color:'blue',
  75.             }
  76.         ]
  77.         
  78.     });
  79.     // 第二个图表的配置项
  80.     mycharts2.setOption({
  81.         title:{
  82.             // 主标题
  83.             text:'折线图',
  84.             left:'center',
  85.             textStyle:{
  86.                 color:'red',
  87.             },
  88.             // 子标题
  89.             subtext:'echarts基本使用',
  90.             subtextStyle:{
  91.                 color:'skyblue',
  92.             }
  93.         },
  94.         // x轴
  95.         xAxis:{
  96.             data:['星期一','星期二','星期三','星期四','星期五','星期六','星期日']
  97.         },
  98.         // y轴
  99.         yAxis:{
  100.  
  101.         },
  102.         // 图表类型与数据
  103.         series:[
  104.             {
  105.                 type:'line',
  106.                 data:[10,20,15,44,2,19,100],
  107.             }
  108.         ]
  109.     })
  110. </script>

一个容器显示多个图表

  1.  series:[
  2.             {
  3.                 // 图表类型的设置，bar表示柱状图,pie表示饼状图，line折线图
  4.                 type:'bar',
  5.                 data:[10,20,30,40],
  6.                 // 表示柱状图的颜色
  7.                 color:'blue',
  8.             },
  9.             {
  10.                 // 折线图
  11.                 type:'line',
  12.                 data:[10,20,30,40]
  13.             },
  14.             {
  15.                 // 饼图
  16.                 type:'pie',
  17.                 // name:名称，value：值,显示文字
  18.                 data:[{name:'x',value:10},{name:'y',value:20},{name:'z',value:30},{name:'t',value:40}],
  19.                 // 饼图的宽度和高度
  20.                 width:150,
  21.                 height:150,
  22.                 // 饼图的位置
  23.                 left:150,
  24.                 top:100,
  25.                 // 表示饼图的半径
  26.                 radius:25,
  27.             }
  28.         ]

数据集和dataset

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <!-- 引入echarts依赖包 -->
  9.     <script src="https://cdn.staticfile.net/echarts/4.7.0/echarts.min.js"></script>
  10. </head>
  11. <style>
  12.     * {
  13.         margin: 0;
  14.         padding: 0;
  15.     }
  16.     div {
  17.         width: 800px;
  18.         height: 400px;
  19.     }
  20. </style>
  21. <body>
  22.     <!--准备一个容器用于显示图标 -->
  23.     <div class="box1"></div>
  24.     
  25. </body>
  26. </html>
  27. <script>
  28.     // 基于准备好的dom初始化echarts实例
  29.     let dom1 = document.querySelector('.box1');
  30.     
  31.     // 创建echarts实例
  32.     let mycharts1 = echarts.init(dom1);
  33.     // 数据集
  34.     let data = [
  35.         // 第一个是衣服，第二个是10表示柱状图数据，第二个表示折线图数据，第三个表示饼图名字是x的数据
  36.         ["衣服",10,46,'x',30],
  37.         ["直播",20,28,'y',40],
  38.         ["游戏",30,39,'z',20],
  39.         ["电影",5,10,'t',10],
  40.     ]
  41.     // console.log(mycharts);
  42.     // 指定图表 的配置项与数据
  43.     mycharts1.setOption({
  44.         // 设置字符集
  45.         dataset:{
  46.             // 数据源
  47.             source:data
  48.         },
  49.         // 图表的标题
  50.         title:{
  51.             // 主标题的设置
  52.             text:'数据可视化',
  53.             // 子标题
  54.             subtext:'echarts基本使用',
  55.             // 主标题的颜色
  56.             textStyle:{
  57.                 color:'cyan'
  58.             },
  59.             // 设置标题的位置
  60.             left:'center',
  61.         },
  62.         // x轴的配置项
  63.         xAxis:{
  64.             // 数据
  65.             // data表示底部数据的设置
  66.             data:['衣服','直播','游戏','电影']
  67.         },
  68.         // y轴的配置项
  69.         yAxis:{
  70.             // 显示y轴的线
  71.             axisLine:{
  72.                 show:true
  73.             },
  74.             // 显示y轴的刻度
  75.             axisTick:{
  76.                 show:true
  77.             },
  78.         },
  79.         // 系列的设置：绘制什么样类型的图表，数据的展示都在这里
  80.         series:[
  81.             {
  82.                 // 图表类型的设置，bar表示柱状图,pie表示饼状图，line折线图
  83.                 type:'bar',
  84.                 // data:[10,20,30,40],
  85.                 // 表示柱状图的颜色
  86.                 color:'blue',
  87.                 encode:{
  88.                     // encode表示可以定义data中的数据表示那个表，y表示data中柱状图的数据位置
  89.                     y:1
  90.                 }
  91.             },
  92.             {
  93.                 // 折线图
  94.                 type:'line',
  95.                 // data:[10,20,30,40]
  96.                 encode:{
  97.                     y:2
  98.                 }
  99.             },
  100.             {
  101.                 // 饼图
  102.                 type:'pie',
  103.                 // name:名称，value：值,显示文字
  104.                 // data:[{name:'x',value:10},{name:'y',value:20},{name:'z',value:30},{name:'t',value:40}],
  105.                 // 饼图的宽度和高度
  106.                 width:150,
  107.                 height:150,
  108.                 // 饼图的位置
  109.                 left:120,
  110.                 top:150,
  111.                 // 表示饼图的半径
  112.                 radius:25,
  113.                 encode:{
  114.                     // 饼图旁边的文字
  115.                     itemName:3,
  116.                     value:4
  117.                 }
  118.             }
  119.         ]
  120.         
  121.     });
  122.     // 第二个图表的配置项
  123.    
  124. </script>

内置组件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <!-- 引包 -->
  9.     <script src="https://cdn.staticfile.net/echarts/4.7.0/echarts.min.js"></script>
  10. </head>
  11. <style>
  12.     * {
  13.         margin: 0;
  14.         padding: 0;
  15.     }
  16.     .box {
  17.         width: 100%;
  18.         height: 500px;
  19.         /* border: 1px solid rgb(68, 60, 60); */
  20.     }
  21. </style>
  22. <body>
  23.     <div class="box"></div>    
  24. </body>
  25. </html>
  26. <script>
  27.     // 获取容器
  28.     let dom = document.querySelector('.box');
  29.     // 初始化
  30.     let mycharts = echarts.init(dom);
  31.     // console.log(mycharts);
  32.     // 配置数据
  33.     mycharts.setOption({
  34.         // 标题
  35.         title:{
  36.             text:'echarts组件'
  37.         },
  38.         xAxis:{
  39.             data:['游戏','电影','直播','娱乐']
  40.         },
  41.         yAxis:{},
  42.         series:[
  43.             {
  44.                 name:'柱状图',
  45.                 type:'bar',
  46.                 data:[20,30,40,50]
  47.             },
  48.             {
  49.                 name:'折线图',
  50.                 type:'line',
  51.                 data:[30,40,50,60]
  52.             }
  53.         ],
  54.         // 提示组件
  55.         tooltip:{
  56.             // 提示框文字的颜色
  57.             textStyle:{
  58.                 color:'red'
  59.             }
  60.         },
  61.         // 系列切换组件
  62.         legend:{
  63.             data:['柱状图','折线图']
  64.         },
  65.         // 工具栏组件
  66.         toolbox:{
  67.             show:true,
  68.             feature:{
  69.                 saveAsImage:{},
  70.                 dataZoom:{
  71.                     yAxisIndex:"none"
  72.                 },
  73.                 dataView:{
  74.                     readOnly:false
  75.                 },
  76.                 magicType:{
  77.                     type:['line','bar']
  78.                 },
  79.                 restore:{},
  80.             }
  81.         },
  82.         // 缩放
  83.         dataZoom:{},
  84.         // 调整图表布局
  85.         grid:{
  86.             left:30
  87.         }
  88.     })
  89. </script>

 

 

坐标体系

单个坐标

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <!-- 引包 -->
  9.     <script src="https://cdn.staticfile.net/echarts/4.7.0/echarts.min.js"></script>
  10. </head>
  11. <style>
  12.     * {
  13.         margin: 0;
  14.         padding: 0;
  15.     }
  16.     .box {
  17.         width: 100%;
  18.         height: 500px;
  19.         /* border: 1px solid rgb(68, 60, 60); */
  20.     }
  21. </style>
  22. <body>
  23.     <div class="box"></div>    
  24. </body>
  25. </html>
  26. <script>
  27.     // 获取容器
  28.     let dom = document.querySelector('.box');
  29.     // 初始化
  30.     let mycharts = echarts.init(dom);
  31.     // 一个坐标体系：散点图
  32.     mycharts.setOption({
  33.         // 标题
  34.         title:{
  35.             text:'一个坐标系'
  36.         },
  37.         // x轴
  38.         xAxis:{
  39.             // 可以是数据更加聚合
  40.             type:'category'
  41.         },
  42.         // y轴
  43.         yAxis:{},
  44.         // 散点图
  45.         series:[
  46.             {
  47.                 type:'scatter',
  48.                 // 散点图数据
  49.                 data:[
  50.                     [10,20],
  51.                     [30,64],
  52.                     [20,16],
  53.                     [78,56],
  54.                 ]
  55.             }
  56.         ]
  57.     })
  58. </script>

双坐标体系

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <!-- 引包 -->
  9.     <script src="https://cdn.staticfile.net/echarts/4.7.0/echarts.min.js"></script>
  10. </head>
  11. <style>
  12.     * {
  13.         margin: 0;
  14.         padding: 0;
  15.     }
  16.     .box {
  17.         width: 100%;
  18.         height: 500px;
  19.         /* border: 1px solid rgb(68, 60, 60); */
  20.     }
  21. </style>
  22. <body>
  23.     <div class="box"></div>    
  24. </body>
  25. </html>
  26. <script>
  27.     // 获取容器
  28.     let dom = document.querySelector('.box');
  29.     // 初始化
  30.     let mycharts = echarts.init(dom);
  31.     // 双坐标
  32.     mycharts.setOption({
  33.         title:{
  34.             text:'双坐标'
  35.         },
  36.         xAxis:{
  37.             data:['游戏','直播','经济','娱乐']
  38.         },
  39.         yAxis:[
  40.             {
  41.                 // 显示y轴的线
  42.                 axisLine:{
  43.                     show:true
  44.                 },
  45.                 // 显示y轴的刻度
  46.                 axisTick:{
  47.                     show:true
  48.                 }
  49.             },
  50.             {
  51.                 // 显示y轴的线
  52.                 axisLine:{
  53.                     show:true
  54.                 },
  55.                 // 显示y轴的刻度
  56.                 axisTick:{
  57.                     show:true
  58.                 }
  59.             }
  60.         ],
  61.         series:[
  62.             {
  63.                 type:'line',
  64.                 data:[10,20,30,40],
  65.                 // 表示折线图用的是第一个y轴，索引值为0的y轴
  66.                 yAxisIndex:0,
  67.             },
  68.             {
  69.                 type:'bar',
  70.                 data:[5,10,20,30],
  71.                 // 表示柱状图用的是第二个y轴
  72.                 yAxisIndex:1
  73.             }
  74.         ]
  75.     })
  76. </script>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/612753
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号