各类echarts样式修改记录

最新推荐文章于 2024-01-22 14:27:26 发布
最新推荐文章于 2024-01-22 14:27:26 发布
阅读量168 收藏
点赞数
分类专栏： css Java Web 前端 文章标签： echarts 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Aa12364567/article/details/133983615
版权
前端 同时被 3 个专栏收录
177 篇文章 3 订阅
订阅专栏
css
84 篇文章 1 订阅
订阅专栏
Java Web
43 篇文章 2 订阅
订阅专栏

各类echarts样式修改记录

<template>
  <div class="wrapper">
    <div id="temchart" class="tem-chart"></div>
    <div id="watchart" class="wat-chart"></div>
    <!-- 生物多样性 -->
    <div class="biology-wrapper">
      <div id="bckchart" class="bck-chart"></div>
      <div id="biologychart" class="biology-chart"></div>
    </div>
    <!-- 月度流量统计 -->
    <div class="sta-wrapper">
      <!-- 饼图图例 -->
      <div class="sta-legend">
        <ul class="legend-ul">
          <li v-for="(item, index) in legendList" :key="index">
            <div class="legend-point" :style="{ 'background-color': item.color }">
            </div>
            <span class="legend-name">{{ item.name }}</span>
            <span class="legend-value" :style="{ 'color': item.color }">{{ item.value }}%</span>
            <div class="legend-line"></div>
          </li>
        </ul>
      </div>
      <!-- 饼图与折线图 -->
      <div id="stachart" class="sta-chart"></div>
      <div id="piebckchart" class="pie-bck"></div>
    </div>
    <!-- 水质类别统计 -->
    <div class="category-wrapper">
      <!-- 春夏秋冬 -->
      <ul class="season-ul">
        <li v-for="(item, index) in seasonList" :key="index">
          <span 
          :class="[item.checked ? 'check-season' : '']"
          @click="checkSeason(index)">{{ item.name }}</span>
        </li>
      </ul>
      <div id="categorychart" class="category-chart"></div>
      <div id="categorybckchart" class="category-bck"></div>
      <!-- 饼图图例 -->
      <ul class="category-ul">
        <li v-for="(item, index) in categoryList" :key="index">
          <div class="category-point" :style="{ 'background-color': item.color }"></div>
          <span class="category-name">{{ item.name }}</span>
          <span class="category-percent" :style="{ 'color': item.color }">{{ item.percent }}%</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'qinzhou',
  data() {
    return {
      temChart: '', // 航道气温趋势图
      watChart: '', // 水质年际变化
      biologyChart: '', // 生物多样性柱状图
      bckchart: '', // 生物多样性柱状图背景
      stachart: '', // 月度流量统计
      pieLegendData: ['捕捞船', '油轮', '客轮', '货轮', '执法船', '其他类',],
      legendList: [
        { name: '捕捞船', value: '', color: '#115FEA' },
        { name: '油轮', value: '', color: '#61AEFF' },
        { name: '客轮', value: '', color: '#10D3FF' },
        { name: '货轮', value: '', color: '#10EBE3' },
        { name: '执法船', value: '', color: '#776CF4' },
        { name: '其他类', value: '', color: '#EB9C36' }
      ],
      piebckchart: '', //月度流量统计饼图背景
      categorychart: '', // 水质类别统计图
      seasonList: [
        { name: '春', checked: false },
        { name: '夏', checked: true },
        { name: '秋', checked: false },
        { name: '冬', checked: false }
      ], // 春夏秋冬
      categoryList: [ // 水质数据
        { name: '一类水质', value: '12', percent: '', color: '#3594FF' },
        { name: '二类水质', value: '23', percent: '', color: '#3CC0CB' },
        { name: '三类水质', value: '32', percent: '', color: '#FFA840' },
        { name: '四类水质', value: '43', percent: '', color: '#FCD8AA' },
        { name: '劣四类水质', value: '21', percent: '', color: '#96F2F8' }
      ],
      categoryNum: '', //水质类别统计图中间数值
      categorybckchart: '', // 水质类别统计图背景
    }
  },
  mounted() {
    this.initTemChart()
    this.initWatChart()
    this.initBiologyChart()
    this.initBiologyBck()
    this.initStaChart()
    this.initPieBckChart()
    this.initCategoryChart()
    this.initCategoryBckChart()
  },
  methods: {
    // 初始化航道气温趋势图
    initTemChart() {
      this.temChart = this.$echarts.init(document.getElementById('temchart'))
      var option = {
        title: {
          text: 'xx航道气温趋势图',
          x: 'center',
          // y: '10%',
          textStyle: {                  //标题样式
            fontSize: '18',
            // fontFamily:'FZLTZCHK--GBK1-0',
            color: 'rgba(255,255,255,1)',
          }
        },
        //图例名
        // legend: {
        //   data: ['气温'],
        //   orient: 'horizontal', //图例布局方式：水平 'horizontal' 、垂直 'vertical'
        //   x: 'left', //设置图例位置
        //   y: 'top',
        //   textStyle: {                  //图例样式
        //     fontSize: '18',
        //     fontFamily:'FZLTZCHK--GBK1-0',
        //     color: 'rgba(255,255,255,1)',
        //   }
        // },
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月'],
          axisLine: {       //x轴显示
            "show": true,
          },
          axisTick: {
            "show": false   //去掉x轴刻度线
          },
          axisLabel: {
            color: "#BACCF4"  //坐标轴的文本颜色
          },
          //坐标轴颜色
          axisLine: {
            lineStyle: {
              color: '#00bbff',
              width: 2
            }
          },
          //x轴文字旋转
          // axisLabel: {
          //   rotate: 30,
          //   interval: 0,
          // interval: 0  //设置 X 轴数据间隔几个显示一个，为0表示都显示 
          // },
        },
        yAxis: {
          name: '℃',
          type: 'value',
          // interval: 10,
          min: 0, // 配置 Y 轴刻度最小值
          max: 40,  // 配置 Y 轴刻度最大值
          // splitNumber:10,  // 配置 Y 轴数值间隔
          nameTextStyle: {
            color: '#fff', //  字体颜色
            fontSize: 16, //  字体大小
            fontWeight: 'bolder',
            //关键代码
            padding: [0, 0, 0, -30] //标题位置调整 上 右 下 左
          },
          splitLine: {           //分割线
            show: true,     //控制分割线是否显示
            lineStyle: {       //分割线的样式
              color: ['rgba(255,255,255,0.3)'],
              width: 2,
              type: 'dashed'
            }
          },
          axisLine: {       //y轴不显示
            "show": false
          },
          axisTick: {       //y轴刻度线不显示
            "show": false
          },
          axisLabel: {
            color: "#BACCF4", //刻度线标签颜色
            fontSize: 14,
            formatter: function (value) {
              if (value / 10 % 2 === 1) {
                return value;
              } else {
                return ''
              }
            }
          },

        },
        grid: {          //设置图表显示在区域的哪个位置，控制图表的位置，可以是具体数值或者百分比
          left: '37px',
          right: '30px',
          bottom: '10%',
          containLabel: true,   //containLabel(grid 区域是否包含坐标轴的刻度标签,默认不包含)为true的情况下,无法使图表紧贴着画布显示,但可以防止标签标签长度动态变化时溢出容器或者覆盖其他组件,将containLabel设置为false即可解决
        },
        // tooltip显示
        // tooltip: {
        //   trigger: 'axis'
        // },
        //工具框，可以选择
        // toolbox: {
        //   feature: {
        //     saveAsImage: {}
        //   }
        // },
        series: [
          {
            data: [0, 0, 0, 0, 0, 0],
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(190,216,240,0.06)'
            }
          },
          {
            name: '气温',
            data: [3, 5, 6, 9, 30, 32],
            type: 'line',
            symbol: 'circle', //设置拐点为实圈圆
            symbolSize: 19,   //拐点圆的大小
            smooth: false,  //设置折线为圆滑曲线,false则有转折点，若为数值（0.5）则代表折线弧度
            stack: "Total",
            showAllSymbol: false,
            // areaStyle: {
            //   color: 'rgba(46,82,212,0.2)'    //折线区域的背景颜色
            // },

            // markPoint: { //最高点最低点显示
            //   data: [
            //     { type: 'max', name: 'Max' },//最大值
            //     { type: 'min', name: 'Min' }//最小值
            //   ]
            // },
            itemStyle: {
              normal: {
                // color: '#00E0FF',  // 设置折线点颜色 
                color: {
                  type: "radial",
                  x: 0.5,
                  y: 0.5,
                  r: 0.5,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#00bbff" //中心颜色
                    },
                    {
                      offset: 0.4,
                      color: "#00bbff" //中心颜色
                    },
                    {
                      offset: 0.5,
                      color: "#ffffff00"
                    },
                    {
                      offset: 1,
                      color: "#ffffff00"
                    }
                  ]
                },
                borderColor: "#00bbff", //圆点边框线颜色
                borderWidth: 2,
                // color: '#fff',
                label: {  //在折线拐点上显示数据
                  show: true,
                  textStyle: {  // 拐点文字样式
                    color: '#48E9FF',
                    fontWeight: 500,
                    fontSize: 16,
                    position: 'top', // 定位在拐点上面
                    // distance: 115 // 偏移量，举例拐点多少
                  },
                },
                fontSize: 18,
                lineStyle: {  //设置折线样式
                  width: 2, //折线宽度
                  color: '#00bbff', //折线颜色
                  //折线颜色渐变
                  // color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                  //   offset: 0,
                  //   color: 'rgba(45,105,249,1)'
                  // },
                  // {
                  //   offset: 1,
                  //   color: 'rgba(89,205,253,1)'
                  // }])
                }
              },
              emphasis: {   //鼠标经过时折点小圆圈样式
                borderColor: 'rgba(0,196,132,0.2)',
                borderWidth: 10
              },

            },

          }
        ]
      };
      this.temChart.setOption(option);
    },
    // 初始化水质年际变化趋势图
    initWatChart() {
      this.watChart = this.$echarts.init(document.getElementById('watchart'))
      var option = {
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月'],
          axisLine: {       //x轴显示
            "show": true,
          },
          axisTick: {
            "show": false   //去掉x轴刻度线
          },

          //坐标轴颜色
          axisLine: {
            lineStyle: {
              color: '#BAE7FF',
              width: 2
            }
          },
        },
        yAxis: {
          name: 'mg/l',
          type: 'value',
          // interval: 10,
          min: 0, // 配置 Y 轴刻度最小值
          max: 500,  // 配置 Y 轴刻度最大值
          // splitNumber:10,  // 配置 Y 轴数值间隔
          nameTextStyle: {
            color: 'rgba(230,247,255,0.5)', //  字体颜色
            fontSize: 12, //  字体大小
            fontWeight: '400',
            //关键代码
            padding: [0, 0, 0, -30] //标题位置调整 上 右 下 左
          },
          splitLine: {           //分割线
            show: true,     //控制分割线是否显示
            lineStyle: {       //分割线的样式
              color: ['rgba(255,255,255,0.3)'],
              width: 2,
              type: 'dashed'
            }
          },
          axisLine: {       //y轴不显示
            "show": false
          },
          axisTick: {       //y轴刻度线不显示
            "show": false,
          },
          axisLabel: {
            color: "rgba(230,247,255,0.5)", //刻度线标签颜色
            fontSize: 14,
            formatter: function (value) {
              if (value / 100 % 2 === 0) {
                return value;
              } else {
                return ''
              }
            }
          },
        },
        //图例名
        legend: {
          // data: ['磷酸盐', '化学需氧量'],
          data: [
            {
              name: '磷酸盐',
              icon: 'rect', // 用矩形替换
            }, {
              name: '化学需氧量',
              icon: 'rect', // 用矩形替换
            },
          ],
          itemWidth: 16, //矩形宽度
          itemHeight: 2, //矩形高度
          orient: 'horizontal', //图例布局方式：水平 'horizontal' 、垂直 'vertical'
          x: 'center', //设置图例位置
          y: '10',
          textStyle: {                  //图例样式
            fontSize: '14',
            fontWeight: '400',
            fontFamily: 'FZLTZCHK--GBK1-0',
            color: '#E6F7FF',
          },

        },
        series: [
          // 磷酸盐
          {
            data: [170, 490, 210, 218, 135, 147],
            type: 'line',
            name: '磷酸盐',
            smooth: true,
            symbolSize: 0,
            itemStyle: {
              normal: {
                color: '#2CDFF2',
              }
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [  // 渐变颜色
                  {
                    offset: 0,
                    color: 'rgba(44,223,242,0.2)',
                  },
                  {
                    offset: 1,
                    color: 'rgba(44,223,242,0)',
                  },
                ],
                global: false,
              },
            },
          },
          // 化学需氧量
          {
            data: [270, 230, 324, 418, 435, 347],
            type: 'line',
            name: '化学需氧量',
            smooth: true,
            showSymbol: false,
            itemStyle: {
              normal: {
                color: '#61AEFF'
              }
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [  // 渐变颜色
                  {
                    offset: 0,
                    color: 'rgba(97,174,255,0.2)',
                  },
                  {
                    offset: 1,
                    color: 'rgba(97,174,255,0)',
                  },
                ],
                global: false,
              },
            },
          }
        ]
      };
      this.watChart.setOption(option);
    },
    // 初始化生物多样性
    initBiologyChart() {
      this.biologyChart = this.$echarts.init(document.getElementById('biologychart'))
      var option = {
        xAxis: {
          type: 'category',
          data: ['鱼类', '绕足类', '有尾类', '虾类', '水母类', '丝状藻类', '棕榈藻', '箭虫'],
          axisLine: {       //x轴显示
            "show": true,
          },
          axisTick: {
            "show": false   //去掉x轴刻度线
          },
          //坐标轴颜色
          axisLine: {
            lineStyle: {
              color: '#00bbff',
              width: 2
            }
          },
          // x轴文字旋转
          axisLabel: {
            rotate: 30,
            interval: 0,
            interval: 0,  //设置 X 轴数据间隔几个显示一个，为0表示都显示 
            color: "rgba(230,247,255,0.5)"  //坐标轴的文本颜色
          },
        },
        yAxis: {
          name: '种',
          type: 'value',
          // interval: 10,
          min: 0, // 配置 Y 轴刻度最小值
          max: 40,  // 配置 Y 轴刻度最大值
          // splitNumber:10,  // 配置 Y 轴数值间隔
          nameTextStyle: {
            color: 'rgba(230,247,255,0.5)', //  字体颜色
            fontSize: 12, //  字体大小
            fontWeight: '400',
            //关键代码
            padding: [0, 0, -20, -30] //标题位置调整 上 右 下 左
          },
          splitLine: {           //分割线
            show: true,     //控制分割线是否显示
            lineStyle: {       //分割线的样式
              color: ['rgba(255,255,255,0.3)'],
              width: 2,
              type: 'dashed'
            }
          },
          axisLine: {       //y轴不显示
            "show": false
          },
          axisTick: {       //y轴刻度线不显示
            "show": false
          },
          axisLabel: {
            color: "#BACCF4", //刻度线标签颜色
            fontSize: 14,
            formatter: function (value) {
              if (value / 10 % 2 === 1) {
                return value;
              } else {
                return ''
              }
            }
          },

        },
        grid: {          //设置图表显示在区域的哪个位置，控制图表的位置，可以是具体数值或者百分比
          left: '37px',
          right: '26px',
          bottom: '1%',
          containLabel: true,   //containLabel(grid 区域是否包含坐标轴的刻度标签,默认不包含)为true的情况下,无法使图表紧贴着画布显示,但可以防止标签标签长度动态变化时溢出容器或者覆盖其他组件,将containLabel设置为false即可解决
        },
        series: [
          {
            data: [13, 7, 28, 10, 7, 4, 14, 9],
            type: 'bar',
            barWidth: 12, //设置柱子宽度
            color: 'blue',
            showBackground: false,
            backgroundStyle: {
              color: 'rgba(190,216,240,0.06)'
            },
            label: {  //在柱状图上显示数据
              show: true,
              position: 'top',
              textStyle: {  // 文字样式
                color: '#fff',
                fontWeight: 500,
                fontSize: 14,
              },
            },

            markPoint: {
              symbol: 'rect',
              symbolSize: '15',
            },
            itemStyle: {  // 柱状图渐变
              color: {
                type: 'linear',
                x: 0,  //右
                y: 0,  //下
                x2: 0,  //左
                y2: 1,  //上
                colorStops: [
                  {
                    offset: 0,
                    color: '#1A96F9' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#4CECFF' // 100% 处的颜色
                  }
                ]
              },

            },
          },

        ]
      };
      this.biologyChart.setOption(option);
    },
    // 初始化生物多样性背景图
    initBiologyBck() {
      this.bckchart = this.$echarts.init(document.getElementById('bckchart'))
      var option = {
        xAxis: {
          type: 'category',
          data: ['鱼类', '绕足类', '有尾类', '虾类', '水母类', '丝状藻类', '棕榈藻', '箭虫'],
          axisLine: {       //x轴显示
            "show": false,
          },
          axisTick: {
            "show": false   //去掉x轴刻度线
          },
          // x轴文字旋转
          axisLabel: {
            rotate: 30,
            interval: 0,
            interval: 0,  //设置 X 轴数据间隔几个显示一个，为0表示都显示 
            color: "rgba(0,0,0,0)"  //坐标轴的文本颜色
          },
          //坐标轴颜色
          axisLine: {
            show: false,
            lineStyle: {
              color: '#00bbff',
              width: 2
            }
          },
        },
        yAxis: {
          name: '',
          type: 'value',
          // interval: 10,
          min: 0, // 配置 Y 轴刻度最小值
          max: 40,  // 配置 Y 轴刻度最大值
          // splitNumber:10,  // 配置 Y 轴数值间隔
          nameTextStyle: {
            color: '#fff', //  字体颜色
            fontSize: 16, //  字体大小
            fontWeight: 'bolder',
            //关键代码
            padding: [0, 0, 0, -30] //标题位置调整 上 右 下 左
          },
          splitLine: {           //分割线
            show: false,     //控制分割线是否显示
            lineStyle: {       //分割线的样式
              color: ['rgba(255,255,255,0.3)'],
              width: 2,
              type: 'dashed'
            }
          },
          axisLine: {       //y轴不显示
            "show": false
          },
          axisTick: {       //y轴刻度线不显示
            "show": false
          },
          axisLabel: {
            color: "rgba(255,0,0,0)", //刻度线标签颜色
            fontSize: 14,
          },
        },
        grid: {          //设置图表显示在区域的哪个位置，控制图表的位置，可以是具体数值或者百分比
          left: '37px',
          right: '26px',
          bottom: '1%',
          containLabel: true,   //containLabel(grid 区域是否包含坐标轴的刻度标签,默认不包含)为true的情况下,无法使图表紧贴着画布显示,但可以防止标签标签长度动态变化时溢出容器或者覆盖其他组件,将containLabel设置为false即可解决
        },
        series: [
          {
            data: [0, 0, 0, 0, 0, 0, 0, 0],
            type: 'bar',
            barWidth: 40, //设置柱子宽度
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(190,216,240,0.06)'
            }
          },

        ]
      };

      this.bckchart.setOption(option);
    },
    // 初始化月度流量统计图
    initStaChart() {
      this.stachart = this.$echarts.init(document.getElementById('stachart'))
      let that = this // 解决Cannot read properties of undefined (reading 'setOption')错误
      var option = {
        title: {
          text: '船舶流量趋势图',
          x: 'center',
          y: '48%',
          textStyle: {                  //标题样式
            fontSize: '14',
            // fontFamily:'FZLTZCHK--GBK1-0',
            color: '#E6F3FF',
          }
        },
        tooltip: {
          trigger: 'axis',
          showContent: false
        },
        dataset: {
          source: [
            ['product', '1月', '2月', '3月', '4月', '5月', '6月'],
            ['捕捞船', 156.5, 182.1, 188.7, 270.1, 153.4, 285.1],
            ['油轮', 251.1, 151.4, 355.1, 453.3, 373.8, 468.7],
            ['客轮', 240.1, 462.2, 369.5, 236.4, 145.2, 232.5],
            ['货轮', 325.2, 137.1, 141.2, 318, 233.9, 449.1],
            ['执法船', 321.1, 187.2, 376.5, 267.4, 451.2, 452.5],
            ['其他类', 288.2, 388.1, 386.2, 279, 489.9, 278.1]
          ]
        },
        xAxis: {
          type: 'category',
          axisLine: {       //x轴显示
            "show": true,
          },
          axisTick: {
            "show": false   //去掉x轴刻度线
          },
          //坐标轴颜色
          axisLine: {
            lineStyle: {
              color: '#fff',
              width: 2
            }
          },
          // x轴文字旋转
          axisLabel: {
            // rotate: 30,
            // interval: 0,
            interval: 0,  //设置 X 轴数据间隔几个显示一个，为0表示都显示 
            color: "rgba(230,247,255,0.5)"  //坐标轴的文本颜色
          },
        },
        yAxis: {
          gridIndex: 0,
          name: '艘',
          type: 'value',
          // interval: 10,
          min: 0, // 配置 Y 轴刻度最小值
          max: 500,  // 配置 Y 轴刻度最大值
          nameTextStyle: {
            color: 'rgba(230,247,255,0.5)', //  字体颜色
            fontSize: 12, //  字体大小
            fontWeight: '400',
            //关键代码
            padding: [0, 0, -20, -30] //标题位置调整 上 右 下 左
          },
          splitLine: {           //分割线
            show: true,     //控制分割线是否显示
            lineStyle: {       //分割线的样式
              color: ['rgba(255,255,255,0.3)'],
              width: 2,
              type: 'dashed'
            }
          },
          axisLine: {       //y轴不显示
            "show": false
          },
          axisTick: {       //y轴刻度线不显示
            "show": false
          },
          axisLabel: {
            color: "#BACCF4", //刻度线标签颜色
            fontSize: 14,
            formatter: function (value) {
              if (value / 100 % 2 === 0) {
                return value;
              } else {
                return ''
              }
            }
          },
        },
        grid: {
          top: '55%',
        },
        series: [
          // 捕捞船
          {
            type: 'line',
            smooth: true,
            showSymbol: false,
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' },
            color: '#115FEA',
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [  // 渐变颜色
                  {
                    offset: 0,
                    color: 'rgba(17,95,234,0.2)',
                  },
                  {
                    offset: 1,
                    color: 'rgba(17,95,234,0)',
                  },
                ],
                global: false,
              },
            },
          },
          // 油轮
          {
            type: 'line',
            smooth: true,
            showSymbol: false,
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' },
            color: '#61AEFF',
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [  // 渐变颜色
                  {
                    offset: 0,
                    color: 'rgba(97,174,255,0.2)',
                  },
                  {
                    offset: 1,
                    color: 'rgba(97,174,255,0)',
                  },
                ],
                global: false,
              },
            },
          },
          // 客轮
          {
            type: 'line',
            smooth: true,
            showSymbol: false,
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' },
            color: '#10D3FF',
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [  // 渐变颜色
                  {
                    offset: 0,
                    color: ' rgba(16,211,255,0.2)',
                  },
                  {
                    offset: 1,
                    color: ' rgba(16,211,255,0)',
                  },
                ],
                global: false,
              },
            },
          },
          // 货轮
          {
            type: 'line',
            smooth: true,
            showSymbol: false,
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' },
            color: '#10EBE3',
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [  // 渐变颜色
                  {
                    offset: 0,
                    color: 'rgba(16,235,227,0.2)',
                  },
                  {
                    offset: 1,
                    color: 'rgba(16,235,227,0)',
                  },
                ],
                global: false,
              },
            },
          },
          // 执法船
          {
            type: 'line',
            smooth: true,
            showSymbol: false,
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' },
            color: '#776CF4',
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [  // 渐变颜色
                  {
                    offset: 0,
                    color: 'rgba(119,108,244,0.2)',
                  },
                  {
                    offset: 1,
                    color: 'rgba(119,108,244,0)',
                  },
                ],
                global: false,
              },
            },
          },
          // 其他类
          {
            type: 'line',
            smooth: true,
            showSymbol: false,
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' },
            color: '#EB9C36',
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [  // 渐变颜色
                  {
                    offset: 0,
                    color: ' rgba(235,156,54,0.2)',
                  },
                  {
                    offset: 1,
                    color: ' rgba(235,156,54,0)',
                  },
                ],
                global: false,
              },
            },
          },
          // 环状饼图
          {
            type: 'pie',
            radius: ['25%', '30%'],
            id: 'pie',
            color: ['#115FEA', '#61AEFF', '#10D3FF', '#10EBE3', '#776CF4', '#EB9C36'],
            hoverAnimation: false, //开启放大效果
            center: ['16%', '25%'],
            itemStyle: {
              borderRadius: 10,
              borderColor: '#021F58',
              borderWidth: 4
            },
            emphasis: {
              focus: 'self',
            },
            label: {
              show: false,
              // formatter: '{b}: {@1月} ({d}%)'
              formatter: function (value) {
                var index = that.legendList.findIndex(item => item.name === value.name)
                if (index != -1) {
                  that.legendList[index].value = value.percent
                }
              }
            },
            legend: {
              show: true,
              itemWidth: 8,//图例的图标直径，圆点的直径大小
              itemGap: 20,
              icon: 'circle',
              textStyle: {
                color: 'rgba(0,0,0,.65)',
              },
              formatter: name => { },
              data: ['捕捞船', '油轮', '客轮', '货轮', '执法船', '其他类']
            },
            encode: {
              itemName: 'product',
              value: '1月',
              tooltip: '1月'
            },
            tooltip: {
              trigger: 'item'
            },
          },

        ]
      };
      // let that = this 
      this.stachart.on('updateAxisPointer', function (event) {
        const xAxisInfo = event.axesInfo[0];
        if (xAxisInfo) {
          const dimension = xAxisInfo.value + 1;
          that.initPieBckChart()
          that.stachart.setOption({
            series: [
              {
                id: 'pie',
                label: {
                  // formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                  formatter: function (value) {
                    var index = that.legendList.findIndex(item => item.name === value.name)
                    if (index != -1) {
                      that.legendList[index].value = value.percent
                    }
                    return value.percent
                  }
                },
                encode: {
                  value: dimension,
                  tooltip: dimension
                },
              },

            ]
          });
        }
      });

      this.stachart.setOption(option);
    },
    // 初始化月度流量统计饼图背景图
    initPieBckChart() {
      this.piebckchart = this.$echarts.init(document.getElementById('piebckchart'))
      var option = {
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['43%', '59%'],
            center: ['16%', '50%'],
            color: ['rgba(17,95,234, 0.3)', 'rgba(97,174,255,0.2)', 'rgba(16,211,255,0,2)', 'rgba(16,235,227,0.2)', 'rgba(119,108,244,0,2)', 'rgba(235,156,54,0.2)'],
            hoverAnimation: false, //开启放大效果
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#021F58',
              borderWidth: 4
            },
            label: {
              show: false,
              position: 'center'
            },
            // emphasis: {
            //   label: {
            //     show: true,
            //     fontSize: 40,
            //     fontWeight: 'bold'
            //   }
            // },
            labelLine: {
              show: false
            },
            data: this.legendList
          }
        ]
      };
      this.piebckchart.setOption(option);
    },
    // 水质类别统计图
    initCategoryChart() {

      this.categorychart = this.$echarts.init(document.getElementById('categorychart'))
      let that = this
      var num = this.categoryNum
      var option = {
        title: {
          text: '',
          subtext: '',
          left: '33%',
          top: 'center'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['30%', '34%'],
            center: ['35%', '50%'],
            color: ['#3594FF', '#3CC0CB', '#FFA840', '#FCD8AA', '#96F2F8'],
            hoverAnimation: false, //开启放大效果
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#021F58',
              borderWidth: 4
            },
            label: {
              show: false,
              formatter: function (value) {
                that.categoryNum = value.percent
                var index = that.categoryList.findIndex(item => item.name === value.name)
                if (index != -1) {
                  that.categoryList[index].percent = value.percent
                }
                return value.percent
              },
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 26,
                color: '#fff',
                fontWeight: 'bold',
                formatter: function (value) {
                  // console.log(value);
                  that.categoryNum = value.percent
                  // console.log(that.categoryNum);
                  // return '<div>' +value.percent + '%</div>'
                  return value.percent + '%'
                },
                position: 'center',
              }
            },
            labelLine: {
              show: false
            },
            data: this.categoryList
          }
        ]
      };
      this.categorychart.setOption(option);
    },
    // 水质类别统计背景图
    initCategoryBckChart() {
      this.categorybckchart = this.$echarts.init(document.getElementById('categorybckchart'))
      let that = this
      var num = this.categoryNum
      var option = {
        title: {
          text: '',
          subtext: '',
          left: '33%',
          top: 'center'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['30%', '50%'],
            center: ['35%', '50%'],
            color: ['rgba(53,148,255, 0.3)', 'rgba(60,192,203,0.2)', 'rgba(255,168,64,0,2)', 'rgba(252,216,170,0.2)', 'rgba(150,242,248,0,2)'],
            hoverAnimation: false, //开启放大效果
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#021F58',
              borderWidth: 4
            },
            label: {
              show: false,
              formatter: function (value) {
                that.categoryNum = value.percent
                var index = that.categoryList.findIndex(item => item.name === value.name)
                if (index != -1) {
                  that.categoryList[index].percent = value.percent
                }
                return value.percent
              },
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 26,
                color: '#fff',
                fontWeight: 'bold',
                formatter: function (value) {
                  // console.log(value);
                  that.categoryNum = value.percent
                  // console.log(that.categoryNum);
                  // return '<div>' +value.percent + '%</div>'
                  return value.percent + '%'
                },
                position: 'center',
              }
            },
            labelLine: {
              show: false
            },
            data: this.categoryList
          }
        ]
      };
      this.categorybckchart.setOption(option);
    },
    checkSeason(index) {
      console.log(index);
      this.seasonList.map((item) =>{ item.checked = false})
      this.seasonList[index].checked = true
    }
  }
}
</script>

<style scoped>
.wrapper {
  width: 100%;
  height: 100%;

}

/* 航道气温趋势图 */
.tem-chart {
  float: left;
  width: 25%;
  height: 40%;
  background-color: #021F58;
}

/* 水质年际变化 */
.wat-chart {
  width: 25%;
  height: 40%;
  background-color: #021F58;
  float: left;
  margin-left: 40px;
}

/* 生物多样性 */
.biology-wrapper {
  width: 25%;
  height: 40%;
  background-color: #021F58;
  float: left;
  margin-left: 40px;
  position: relative;
}

/* 背景图 */
.bck-chart {
  width: 100%;
  height: 100%;
  position: absolute;
}

/* 生物多样性图 */
.biology-chart {
  width: 100%;
  height: 100%;
}

/* 月度流量统计 */
.sta-wrapper {
  width: 25%;
  height: 40%;
  background-color: #021F58;
  float: left;
  margin-top: 40px;
  position: relative;
}

.sta-legend {
  width: 70%;
  height: 50%;
  position: absolute;
  right: 0;
}

.legend-ul {
  width: 100%;
  margin-top: 32px;
}

.legend-ul>li {
  display: inline-block;
  width: 40%;
  text-align: left;
  position: relative;
  margin-right: 20px;
  margin-bottom: 20px;
}

.legend-point {
  display: inline-block;
  width: 8px;
  height: 8px;
}

.legend-name {
  margin-left: 10px;
  font-size: 16px;
  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
  font-weight: 400;
  color: #E6F7FF;
}

.legend-value {
  position: absolute;
  right: 0;
  font-size: 18px;
  font-family: D-DIN-DIN-Bold, D-DIN-DIN;
  font-weight: bold;
}

.legend-line {
  width: calc(100% - 4px);
  height: 6px;
  border-left: 1px solid rgba(56, 109, 171, 0.3);
  border-bottom: 1px solid rgba(56, 109, 171, 0.3);
  margin-left: 4px;
  position: relative;
  top: -4px;
}

.sta-chart {
  width: 100%;
  height: 100%;
}

.pie-bck {
  width: 100%;
  height: 50%;
  /* background-color: aqua; */
  position: absolute;
  top: 0;
}

/* 水质类别统计 */
.category-wrapper {
  width: 25%;
  height: 40%;
  background-color: #021F58;
  float: left;
  margin-top: 40px;
  position: relative;
  margin-left: 40px;
}

.season-ul {
  position: absolute;
  font-size: 14px;
  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
  font-weight: 400;
  color: #B9DEF2;
  top: 140px;
  left: 20px;
  z-index: 2;
}

.check-season {
  font-size: 16px;
  font-family: Source Han Sans CN-Bold, Source Han Sans CN;
  font-weight: bold;
  color: #32CEFF;
}

.season-ul>li {
  margin-bottom: 11px;
  cursor: pointer;
  height: 20px;
  width: 20px;
}

.season-ul>li:hover {
  font-size: 16px;
  font-family: Source Han Sans CN-Bold, Source Han Sans CN;
  font-weight: bold;
  color: #32CEFF;
}

.category-ul {
  position: absolute;
  top: 54px;
  right: 10px;
}

.category-ul>li {
  width: 188px;
  height: 36px;
  line-height: 36px;
  text-align: left;
  background: rgba(51, 129, 221, 0.11);
  border-radius: 2px 2px 2px 2px;
  border: 1px solid rgba(153, 200, 255, 0.59);
  margin-bottom: 20px;
}

.category-point {
  width: 12px;
  height: 12px;
  margin-left: 16px;
  display: inline-block;
}

.category-name {
  font-size: 16px;
  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
  font-weight: 400;
  color: #D7F1FF;
  margin-left: 10px;
}

.category-percent {
  position: absolute;
  right: 10px;
  font-size: 18px;
  font-family: D-DIN-DIN-Bold, D-DIN-DIN;
  font-weight: bold;
}

.category-chart {
  width: 100%;
  height: 100%;
}

.category-bck {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
}
</style>
不想上班只想要钱
关注
专栏目录
echarts日历 记录信息
09-15
该文章配套资源 ...
echarts的样式修改
weixin_47763287的博客
12-30 535
1、折线图线条样式修改 const option = { xAxis: { type: 'category', data: ['篮球','足球','橄榄球','羽毛球'], }, yAxis: { type: 'value', }, series: [ { data: ['2','1','1','4'],
echarts 各种调整样式
释怀Na
09-27 1万+
在公司需要可视化图表  于是开始了各种调整 记录一下 !   !  ! 首先 要明确  你需要调整什么 要在那个分类下 去调整 比如 ：  x轴 就要去找xAxis : [ {  而y轴 就要去找yAxis : [ { 数据 就要去找series ：[{ 先开始 肯定是 调整整个图的宽度大小 那么 肯定就是 自适应  会根据整个外部div 大小去自适应  myChart.set...
echart自定义样式及使用案例
weixin_43861630的博客
06-11 1297
相应的注释都在代码中 ，
修改echarts图表的一些样式：
小白博主的博客
04-07 2655
标题开始： 先看效果图： 因为大多数标题颜色以灰色出场，但如果背景颜色是深色系，那么你的字会很不清楚，下面就修改字体颜色： 上代码： 将legend中原本的data data：["B1F"，"B2F","总"] 改为里面对象的形式设置颜色： 当然也可以加些图形例如： icon : 'roundRect', data: [ { name: "B1F", //图形 // icon : 'roundRect
Echarts中legend图例的rich属性实现自定义图例的样式-饼图-柱状图等
JackieDYH的博客
07-10 5626
上图表，展示的字体颜色是不同的，而且和名称之间是有间距使用rich实现在formatter自定义样式名称，在textStyle中定义样式内容。当然我们在自定义title样式时也可以使用同样的方法。
echarts 2.2.7修改版. 加入axisline的箭头样式
05-07
在ECharts 2.2.7版本中，用户对图表轴线（axisLine）的个性化需求逐渐增加，因此，这个修改版引入了轴线箭头样式的功能。 轴线（axisLine）是ECharts图表中坐标轴的重要组成部分，通常用于指示坐标轴的范围和方向。...
ECharts 样式设置
01-19
ECharts 样式设置 ECharts 可以通过样式设置来改变图形元素或者文字的颜色、明暗、大小等。 颜色主题 ECharts4 开始，除了默认主题外，内置了两套主题，分别为 light 和 dark。 使用方式如下： 实例 var chart = ...
Echarts3Layer修改
01-11
**Echarts3Layer修改**是针对Echarts 3版本中图层管理的一种改进，旨在提供更灵活的图表显示与隐藏功能。在Echarts 2及更早版本中，虽然已经支持图表的绘制和数据更新，但对图表的显示与隐藏控制可能不够直观或者...
Echarts3Layer 修改
01-11
Echarts3Layer 修改是关于Echarts 3.x版本的一个自定义扩展，主要目的是实现图表的显示与隐藏功能，以提供更灵活的用户交互体验。在Echarts原生库中，虽然已经提供了丰富的图表类型和配置选项，但在某些场景下，用户...
echarts修改legend样式(正方形、矩形、圆形等等)
最新发布
zhang_zan
01-22 3880
【代码】echarts修改legend样式(正方形、矩形、圆形等等)
ECharts“图例标记图形”样式调整
喜欢文学的程序员
11-13 5372
这两天的工作中，遇到一个ECharts方面的问题，需要把环形图“图例标记图形”隐藏掉，像下图这样。我用到的方法是，itemWidth：0。继续深入学习后发现，其中拥有的奥妙远不止于此。 1. 隐藏“图例标记图形” ECharts中legend组件是对图例的说明，用来设置图例的相关样式。最初我用itmeWidth:0的方式可以说是一种变相隐藏。实际上图形的高度依然存在，依旧占据空间。（当然...
Echarts—自定义图例布局样式和图例换行的实现
前端探险家的博客
06-13 8763
之前做过各种各样需求的Echarts图表，通过查找博客和查看官网配置项api，都能实现，但是很久不用的话，再去做某些一样功能需求的图表，有些配置项还是需要反复查看，或者去搜索，所以我特意开了一个可视化专栏，去把使用过的可视化记录下来，也方便日后自己复用或者为他人提供便利！这次就记录一下自定义图例布局样式和图例换行的实现，我会把整个图表实现的代码都带出来，如果日后项目中用到类似的需求，也可以直接拿去！案例实现如下图；legend : {
echarts图例样式修改
Olay_ya的博客
01-12 908
echarts图例样式修改
echarts改变图例的样式
summer鸿的博客
10-22 3409
1.如下图中，echarts提供的api调整的整个图表的图例，如果想每个图例的样式都不一样，这种不太适用 2 . 调整每个图例的样式，可以用下图这个
echarts的legend——图例样式的配置
热门推荐
杜永康的博客
12-22 4万+
echarts官网配置项手册里有非常详细的内容，我们挑几种常用的看看，加深对legend属性的理解。echarts图表中的图例，有形状，颜色，位置等等各种样式的不同配置。以上几张图表中，红色圆圈部分即图例。
echarts 修改图例说明样式
u014645827的博客
06-30 895
【代码】echarts 修改图例说明样式。
调整echarts的样式
qq_52070860的博客
04-20 4320
方法一：创建echarts时写在setOption(data)的data里面 projectData: { //滚动条 dataZoom: [ { start: 0, //默认为0 end: 100 - 1500 / 31, //默认为100 type: "slider", show: true, xAxisIndex...
Echarts设置背景图片
liyishen1988的博客
11-02 9074
Echarts本身属性不支持背景图片的配置，所以我们需要在生成Echarts图表的Div外套一层Div，用于设置背景图片css。
echarts tooltip样式修改
03-16
要修改Echarts的tooltip样式，可以使用以下方法： 1. 使用tooltip的formatter属性，自定义tooltip的显示内容和样式。 2. 使用tooltip的backgroundColor、borderColor、borderWidth等属性，修改tooltip的背景色、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值