封装Echarts

echarts柱状图

<template>
  <div id="main4" style="width:90%;height:90%;padding-top:10px;"></div>
</template>

<script>
  export default {
    name: "chart4",
    mounted() {
      this.initEcharts4();
    },
    methods: {
      initEcharts4() {
        var chartDom = document.getElementById('main4');
        var myChart4 = this.$echarts.init(chartDom);

        var option4 = {
          grid: {
            top: '30%', // 设置网格顶部距离为50px，增加柱状图离标题的距离
            left:'10%'
            // 其他网格配置...
          },
          xAxis: {
            type: 'category',
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
            axisLabel: {
              show: true, // 是否显示刻度标签，默认显示
              interval: 0, // 坐标轴刻度标签的显示间隔，在类目轴中有效；默认会采用标签不重叠的策略间隔显示标签；可以设置成0强制显示所有标签；如果设置为1，表示『隔一个标签显示一个标签』，如果值为2，表示隔两个标签显示一个标签，以此类推。
              inside: false, // 刻度标签是否朝内，默认朝外
              margin: 20, // 刻度标签与轴线之间的距离
              textStyle: {
                color: '#777777', // 设置X轴标签的颜色
              },
            },
            axisTick: {
              show: false, // 显示刻度线
            },
            axisLine: {
              show:false,
              lineStyle: {
                color: '#4DD85D', // 设置X轴颜色
              },
            },
          },
          yAxis: {
            type: 'value',
            // max: '24',
            min: '0',
            splitNumber: 6,
            axisLine: {
              show: false,    // 是否显示坐标轴轴线
              symbol: ['none'], // 轴线两端箭头，两个值，none表示没有箭头，arrow表示有箭头
              lineStyle: {
                color: '#4DD85D', // 设置X轴颜色
              },
            },
            axisLabel: {
              textStyle: {
                color: '#777777', // 设置X轴标签的颜色为红色
              },
            },
            splitLine: {
              show: true, // 设置为 true 显示刻度线
            }
          },
          series: [
            {
              data: [4.5,14, 8, 7, 9, 10, 6],
              type: 'bar',
              barWidth: 20, // 设置柱形宽度为20像素
              barCategoryGap: '20%',       //---柱形间距
              itemStyle: {
                barBorderRadius: [50], // 设置椭圆柱的两个半径，可以根据需要调整
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#FED74B'
                    },
                    {
                      offset: 1,
                      color: '#FB7397'

                    }
                  ]
                }
              }
            }
          ],

          title: [
            {
              text: '睡眠时间/h'
            },

          ],
          graphic: [
            {
              type: 'rect',
              left: '70%',
              top: '0',
              shape: {
                width: 180,
                height: 40,
                r: 8,
              },
              style: {
                fill: '#93D39B',
              },
            },
            {
              type: 'text',
              left: '71%',
              top: '15',
              style: {
                text: '本月平均睡眠时间：6h',
                fill: '#fff',
                fontFamily: 'Arial',
                fontSize: 16,
              },
            },
          ],
          tooltip: {
            show: true,                  //---是否显示提示框,默认为true
            trigger: 'item',             //---数据项图形触发
            // formatter: function(params) {
            //   var tooltipContent =params.name  + ' ' + params.value + 'bpm'; // 修改格式
            //   return tooltipContent;
            // }
          },
        };
        myChart4.setOption(option4);//将配置参数option4应用到echarts图表实例mycharts4上的方法。通过调用该方法，将会把option4中定义的图表配置应用到mycharts上
      }
    }
  }
</script>

<style scoped>

</style>

 

 

echarts折线图

<template>
  <div id="main2" style="width:90%;height:90%;padding-top:10px;"></div>
</template>

<script>
  export default {
    name: "chart2",
    mounted() {
      this.initEcharts2();
    },
    methods: {
      initEcharts2() {
        var chartDom = document.getElementById('main2');
        var myChart2 = this.$echarts.init(chartDom);

        var option2={

          title: {
            text: '血压'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            right:'0',
            data: ['收缩压', '舒张压']
          },
          grid: {
            left:'5%',
            bottom:'15%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['06:00', '12:00', '18:00', '00:00'],
          },
          yAxis: {
            type: 'value',
            splitNumber: 1, // 将刻度线数量限制为五段值
            axisLine:{
              show:true
            }
          },
          series: [
            {
              name: '收缩压',
              type: 'line',
              data: [60, 86,75,78]
            },
            {
              name: '舒张压',
              type: 'line',
              data: [120, 110,130,140]
            }
          ]
        }

        myChart2.setOption(option2);
      }
    }
  }
</script>

<style scoped>

</style>

 

echarts环形图

<template>
  <div id="main1" style="width:90%;height:90%;"></div>
</template>

<script>
  export default {
    name: "chart1",
    mounted() {
      this.initEcharts1();
    },
    methods: {
      initEcharts1() {
        var chartDom = document.getElementById('main1');//通过ID获取容器元素
        var myChart1 = this.$echarts.init(chartDom);//初始化图表

        let total = 100;//总数
        let salayry1 = 98;//血氧饱和度
        let percentage1 = (salayry1 / total * 100).toFixed(0);//血氧饱和度百分比

        var option1 = {
　　　　　　//标题部分：文本、字体、距离
          title: {
            text: '血氧饱和度',
            textStyle: {
              fontSize: 20,
              // fontWeight: 'bold'
            },
            padding: [10, 0, 0, 10]
          },
　　　　　　//鼠标移动到图表上的提示框触发类型
          tooltip: {
            trigger: "item",
            // transitionDuration: 0, //让提示框跟随鼠标提示
          },
　　　　　　//图表颜色
          color: [
            "#93D39B",
          ],
          legend: {
            orient: "vertical",//图例排列方式
            left: '25%',//图例水平位置
            bottom: "0",//图例垂直位置
            itemHeight: 12, //图例的高度
            itemGap: 12, //图例之间的间距
            data: [
              {
                name: "今日血氧饱和度",//图例名称
                icon: "square",//图例的图标样式
                textStyle: {
                  color: "#93D39B", // 单独设置某一个图列的颜色
                  fontSize: 18
                },
              }
            ],
            //图例的名字需要和饼图的name一致，才会显示图例
          },
          series: [
            // A版块
            {
              name: "今日血氧饱和度",//数据系列名称
              type: "pie",//图表类型为饼图
              radius: ["50%", "60%"],//饼图的半径范围
              center: ["50%", "50%"],//饼图的中心位置
              //环的位置
              label: {
                show: true,//显示标签
                position: "center",//标签位置
                fontSize: 36,//标签字号
                fontWeight: "bold",//标签加粗
              },
              labelLine: {
                normal: {
                  show: false,//不显示标签引导线
                },
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: "20",
                  fontWeight: "bold",
                },
              },
              data: [
                {
                  value: salayry1, //需要显示的数据
                  name: percentage1 + "%",//饼图扇区名称
                  itemStyle: {
                    normal: {
                      color: "#93D39B",//饼图扇区颜色
                    },
                  },
                },
                {
                  value: total - salayry1,
                  //不需要显示的数据，颜色设置成和背景一样
                  itemStyle: {
                    normal: {
                      color: "#E6E6E6",
                    },
                  },
                },
              ],
            },
          ],
          graphic: [//自定义图形元素
            {
              type: 'rect',//图形类型为矩形
              left:'55%',
              top: '0',
              shape: {
                width: 150,
                height: 40,
                r: 8,
              },
              style: {
                fill: '#93D39B',
              },
            },
            {
              type: 'text',
              left:'58%',
              top: '15',
              style: {
                text: '本月平均值：97%',
                fill: '#fff',
                fontFamily: 'Arial',
                fontSize: 16,
              },
            },
          ],
        };
        myChart1.setOption(option1);
      }
    }
  }
</script>

<style scoped>

</style>