echarts效果图和相关配置

头像
西安小哥
    阅读 18 分钟
    English
    • 饼状图扩展图例
      image.png

    配置代码

    export const YYSFL = function(data) {
  return {
    color: ['#1FD0A3', '#0FA7E9', '#FFC929', '#F2775A', '#EF5350'],
    tooltip: {
      trigger: 'item'
    },
    title: {
      show: true, //显示策略，默认值true,可选为：true（显示） | false（隐藏）
      text: '55%', //主标题文本，'\n'指定换行
      link: '', //主标题文本超链接,默认值true
      target: null, //指定窗口打开主标题超链接，支持'self' | 'blank'，不指定等同为'blank'（新窗口）
      subtext: '地下饮用水', //副标题文本，'\n'指定换行
      sublink: '', //副标题文本超链接
      subtarget: null, //指定窗口打开副标题超链接，支持'self' | 'blank'，不指定等同为'blank'（新窗口）
      x: 'center', //水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
      y: 'center', //垂直安放位置，默认为top，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
      textAlign: null, //水平对齐方式，默认根据x设置自动调整，可选为： left' | 'right' | 'center
      backgroundColor: 'rgba(0,0,0,0)', //标题背景颜色，默认'rgba(0,0,0,0)'透明
      borderColor: '#ccc', //标题边框颜色,默认'#ccc'
      borderWidth: 0, //标题边框线宽，单位px，默认为0（无边框）
      padding: 5, //标题内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距
      itemGap: 10, //主副标题纵向间隔，单位px，默认为10
      textStyle: {
        //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
        // fontFamily: 'Arial, Verdana, sans...',
        fontSize: 30,
        fontStyle: 'normal',
        fontWeight: 'bold',
        color: '#4A4A4A'
      }
    },
    legend: {
      top: 55,
      // left: 'right',
      right: 10,
      icon: 'circle',
      itemWidth: 10,
      itemHeight: 7, //修改icon图形大小
      bottom: 0,
      align: 'left',
      orient: 'vertical',
      textStyle:{
        rich:(function(){
          const colors = ['#1FD0A3', '#0FA7E9', '#FFC929', '#F2775A', '#EF5350']
          return ["a","b","c","d","e"].reduce((temp,item,index)=>{
            temp[item]={
              color:colors[index]
            }
            return temp
          },{})
        })()
      },
      formatter: function(name) {
        const dt={
          'Ⅰ类':{
            value:+data[0].value,
            prefix:"a"
          },
          'Ⅱ类':{
            value:+data[1].value,
            prefix:"b"
          },
          'Ⅲ类':{
            value:+data[2].value,
            prefix:"c"
          },
          'Ⅳ类':{
            value:+data[3].value,
            prefix:"d"
          },
          'Ⅴ类':{
            value:+data[3].value,
            prefix:"e"
          },
        };
        return name+"{"+dt[name].prefix+"|    "+dt[name].value+"}"
      },
      
    },
    grid: {
      top: '20%',
      left: '1%',
      right: '15%',
      bottom: '5%',
      containLabel: true
    },
    series: [
      {
        name: 'xxx',
        type: 'pie',
        radius: ['60%', '80%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'outside',
          formatter: '{b}: {d}%',
          fontSize: 14
        },
        emphasis: {
          label: {
            show: false,
            fontSize: '40',
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: true
        },
        data: data
      }
    ]
  }
}

    • 仪表盘定制
      image.png

      import * as echarts from 'echarts';
export const ecologyStaticConfig = {
  grid:{
      bottom:'15%'
  },
  series: [{
      type: 'gauge',
      startAngle: 180,
      endAngle: 0,
      min: 0,
      max: 1,
      splitNumber: 8,
      radius:'200%',
      center:['50%','100%'],
      axisLine: {
          lineStyle: {
              width: 3,
              color: [
                  [0.25, '#FF6E76'],
                  [0.5, '#FDDD60'],
                  [0.75, '#58D9F9'],
                  [1, '#7CFFB2']
              ]
          }
      },
      pointer: {
          // icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
          // width: 10,
          icon:"triangle",
          length: '20%',
          width: 5,
          offsetCenter: [-18, '-30%'],
          itemStyle: {
              borderWidth: 3,
              color:'#1FD0A3',
              // borderColor:"#0FA7E9"
          }
      },
      anchor: {
          show: true,
          showAbove: true,
          size: 10,
          offsetCenter: [0, '-30%'],
          itemStyle: {
              borderWidth: 3,
              color:'#fff',
              borderColor:"#0FA7E9"
          }
      },
      axisTick: {
          splitNumber:1,
          show:true,
          length: 6,
          lineStyle: {
              color: 'auto',
              width: 2
          }
      },
      splitLine: {
          show:false,
          length: 20,
          lineStyle: {
              color: 'auto',
              width: 5
          }
      },
      axisLabel: {
          show:true,
          color: '#464646',
          fontSize: 12,
          distance: 0,
          formatter: function (value) {
              if (value === 0.875) {
                  return '优';
              }
              else if (value === 0.625) {
                  return '中';
              }
              else if (value === 0.375) {
                  return '良';
              }
              else if (value === 0.125) {
                  return '差';
              }
          }
      },
      title: {
          offsetCenter: [0, '20%'],
          fontSize: 14
      },
      detail: {
          fontSize: 14,
          offsetCenter: [0, '-5%'],
          valueAnimation: true,
          formatter: function (value) {
              let level = '优';
              if(value<0.125){
                  level='差'
              }else if(value<0.375){
                  level='良'
              }else if(value<0.625){
                  level='中'
              }else {
                  level = '优';
              }
              return '综合评级' + level + '分';
          },
          color: 'auto'
      },
      data: [{
          value: 0.70,
      }]
  }]
};
    • 区间柱状图
      image.png
    import * as echarts from 'echarts';
export const fileStaticConfig = {
    tooltip: {
        trigger: 'axis'
    },
    color:["#8543E0","#FFC929","#40C567","#0FA7E9","#1FD0A3"],
    legend: {
        data: ['林地', '建设', "草地", "农田", "未利用"],
        top:5,
        left: 'right',
        textStyle: { color: "#4A4A4A" },
        icon: "circle",
        itemWidth: 10,
        itemHeight: 7, //修改icon图形大小
        bottom: 0
    },
    title:{
        text: '',
        textStyle:{
            fontFamily:'Microsoft yahei', //字体
            fontSize:15, //大小
            color:'#000',
            opacity: 0.75,
        }
    },
    grid: {
        left: '2%',
        right: '6%',
        top: "20%",
        bottom: '0%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        boundaryGap: true,
        axisLine: {
            lineStyle: {
                color: '#000',
                width: 1,
                opacity: 0.65,
                // type: "dashed"                 //这里是坐标轴的宽度
            }
        },
        axisLabel: {  
            interval:0,  
            rotate:40  
         },
        data: ['2016','2017','2018','2019','2020','2021']
    },
    yAxis: {
        type: 'value',
        name:'面积',
        axisLine: {
            lineStyle: {
                color: '#000',
                width: 1,
                opacity: 0.15,
                type: "dashed"                 //这里是坐标轴的宽度
            }
        },
        splitLine: {
            show: true,
            lineStyle:{
                type:'dashed'
            }
        }
    },
    series: [
        {
            name: '林地',
            type: 'bar',
            stack: 'one',
            barWidth: 15,
            data: [80, 81, 82, 83, 84, 85]
        },
        {
            name: '建设',
            type: 'bar',
            stack: 'one',
            barWidth: 15,
            data: [20, 21, 22, 23, 24, 25]
        },
        {
            name: '草地',
            type: 'bar',
            stack: 'one',
            barWidth: 15,
            data: [10, 11, 12, 13, 14, 15]
        },
        {
            name: '农田',
            type: 'bar',
            stack: 'one',
            barWidth: 15,
            data: [40, 41, 42, 43, 44, 45]
        },
        {
            name: '未利用',
            type: 'bar',
            stack: 'one',
            barWidth: 15,
            data: [10, 11, 12, 13, 14, 15]
        }
    ]
}
    • 上下柱状图
      image.png
    export const option = {
  tooltip: {
    trigger: 'axis'
  },
  color:["#0FA7E9"],
  title:{
      text: '',
      textStyle:{
          fontFamily:'Microsoft yahei', //字体
          fontSize:15, //大小
          color:'#000',
          opacity: 0.75,
      }
  },
  grid: {
      left: '2%',
      right: '6%',
      top: "10%",
      bottom: 60,
      containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: true,
    axisLine: {
        lineStyle: {
            color: '#000',
            width: 1,
            opacity: 0.65,
            // type: "dashed"                 //这里是坐标轴的宽度
        }
    },
    axisLabel: {  
        interval:0,  
        rotate:40
      },
    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
  },
  yAxis: {
    type: 'value',
    name:'AQI',
    max:300,
    axisLine: {
      lineStyle: {
          color: '#000',
          width: 1,
          opacity: 0.15,
          type: "dashed"                 //这里是坐标轴的宽度
      }
    },
    splitLine: {
        show: true,
        lineStyle:{
            type:'dashed'
        }
    }
  },
  series: [
    {
      areaStyle: {
        opacity: 0.8
      },
      barWidth: 15,
      data: [100, 146, 146, 165, {
        value: 220,
      }, 200, 190, 150, 140, 130, 110, 100],
      type: 'bar',
      markPoint: {
        symbolSize: 0,
        label: {
          color: '#0FA7E9',
          fontWeight: 'bold',
          position: 'top'
        },
        data: [
            {type: 'max', name: '最大值'}
        ]
      }
    }
  ]
}

    饼状图渐变和距离调整
    image.png

    export const SLMJ = {
  // color: ['#1FD0A3', '#dedede'],
  tooltip: {
    trigger: 'item'
  },
  title: {
    show: true, //显示策略，默认值true,可选为：true（显示） | false（隐藏）
    text: '69.65%', //主标题文本，'\n'指定换行
    link: '', //主标题文本超链接,默认值true
    target: null, //指定窗口打开主标题超链接，支持'self' | 'blank'，不指定等同为'blank'（新窗口）
    subtext: '森林覆盖率', //副标题文本，'\n'指定换行
    sublink: '', //副标题文本超链接
    subtarget: null, //指定窗口打开副标题超链接，支持'self' | 'blank'，不指定等同为'blank'（新窗口）
    x: '30%', //水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
    y: 'center', //垂直安放位置，默认为top，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
    textAlign: 'center', //水平对齐方式，默认根据x设置自动调整，可选为： left' | 'right' | 'center
    backgroundColor: 'rgba(0,0,0,0)', //标题背景颜色，默认'rgba(0,0,0,0)'透明
    borderColor: '#ccc', //标题边框颜色,默认'#ccc'
    borderWidth: 0, //标题边框线宽，单位px，默认为0（无边框）
    padding: 5, //标题内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距
    itemGap: 10, //主副标题纵向间隔，单位px，默认为10
    textStyle: {
      //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
      // fontFamily: 'Arial, Verdana, sans...',
      fontSize: 30,
      fontStyle: 'normal',
      fontWeight: 'bold',
      color: '#4A4A4A'
    }
  },
  legend: {
    show: false,
    top: 55,
    // left: 'right',
    right: 50,
    icon: 'circle',
    itemWidth: 10,
    itemHeight: 7, //修改icon图形大小
    bottom: 0,
    align: 'left',
    orient: 'vertical'
  },
  grid: {
    top: '20%',
    left: '1%',
    right: '15%',
    bottom: '5%',
    containLabel: true
  },
  series: [
    {
      name: '森林面积',
      type: 'pie',
      radius: ['60%', '70%'],
      center: ['30%', '50%'], // 外圆的位置
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'outside',
        formatter: '{b}: {d}%',
        fontSize: 14
      },
      emphasis: {
        label: {
          show: false,
          fontSize: '40',
          fontWeight: 'bold'
        }
      },
      data: [
        {
          value: 20,
          name: '秦岭天然林面积',
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: '#1FD0A3' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#0FA7E9' // 100% 处的颜色
                }
              ]
            }
          },
          labelLine: {
            show: true
          }
        },
        { value: 8, name: 'Ⅱ类', itemStyle: {
          color: "#dedede"}}
      ]
    }
  ]
}
    • 区域折线图

    image.png

    配置：

    import * as echarts from 'echarts'
//水质达标率
export const SZDBL = {
  tooltip: {
    trigger: 'axis',
    formatter:'{c}%'
  },
  color: ['#1FD0A3'],
  title: {
    text: '',
    x: 10,
    y: 0,
    textStyle: {
      fontFamily: 'Microsoft yahei', //字体
      fontSize: 15, //大小
      color: '#000',
      opacity: 0.75
    }
  },
  grid: {
    top: '20%',
    left: '5%',
    right: '5%',
    bottom: '5%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: true,
    interval:0,
    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
  },
  yAxis: {
    type: 'value',
    name: '%',
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed'
      }
    }
  },
  series: [
    {
      areaStyle: {
        opacity: 0.8
      },
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: ' rgba(31, 208, 163, 0.61)' },
            { offset: 1, color: 'rgba(31, 208, 163, 0)' }
          ])
        }
      },
      data: [36, 46, 54, 63, 75, 84],
      type: 'line',
      areaStyle: {}
    }
  ]
}

    日历组件
    image.png

    <template>
  <a-card title="月度城市蓝天日历预测" style="width: 100%;height: 100%;">
    <div class="aCard-content" style="height: 40vh;">
      <div class="lengend">
        <div v-for="(item,index) in lengend" :key="index" style="margin-right: 10px;">
          <span :class="['lengend-circle',item.color]"></span>
          <span>{{item.name}}</span>
        </div>
      </div>
      <div>
        <div class="top-title">{{time}}</div>
        <div style="padding:10px;">
          <div class="day-title">
            <div v-for="(item,index) in dayTitle" class="day-item" :key="index">{{item}}</div>
          </div>
          <div class="day-content">
            <div v-for="(item,index) in day" :key="index"
              :class="['day-item',!item.inval?'color'+item.status:'',item.isCurrent?'today':'']">
              <a-tooltip placement="top">
                <template slot="title">
                  <span>{{item|filterStatus}}</span>
                </template>
                {{item.name}}
              </a-tooltip>
            </div>
          </div>
        </div>
      </div>
      <!-- <fileCharts /> -->
    </div>
  </a-card>
</template>

<script>
  import { getAction } from '@/api/manage'
  const lengends = [
    {
      key: "1",
      color: "color1",
      name: "优Ⅰ"
    },
    {
      color: "color2",
      key: "2",
      name: "良Ⅱ"
    },
    {
      color: "color3",
      key: "3",
      name: "轻度污染Ⅲ"
    },
    {
      color: "color4",
      key: "4",
      name: "重度污染Ⅳ"
    },
    {
      color: "color5",
      key: "5",
      name: "严重污染Ⅴ"
    },
  ];
  export default {
    name: 'MonitoringMeans',
    data() {
      return {
        time: new Date().format("yyyy年MM月"),
        lengend: lengends,
        dayTitle: ["一", "二", "三", "四", "五", "六", "日"],
        day: [],
        dayStatus: {
          1: {
            status: "1"
          },
          2: {
            status: "1"
          },
          3: {
            status: "1"
          },
          4: {
            status: "1"
          },
          5: {
            status: "4"
          },
          6: {
            status: "5" 
          },
          7: {
            status: "1"
          },
        }
      }
    },
    mounted() {
      this.getCurrentDays();
    },
    filters: {
      'filterStatus': function (val) {
        if (val.inval) {
          return val.name
        } else {
          let lengend = lengends.filter(item => item.key == val.status);
          return lengend && lengend[0] && ("空气质量：" + lengend[0].name)
        }
      }
    },
    methods: {
      getCurrentDays() {
        var date = new Date();//当前日期
        var year = date.getFullYear();//当年
        var month = date.getMonth() + 1;//当月
        var firstDayOfMonth = (new Date(`${year}/${month}/01`)).getDay();//判断当月1号的星期值
        var currentMonthDays = (new Date(year, month, 0)).getDate();//当月天数
        var beforeMonthDays = (new Date(year, month - 1, 0)).getDate();//上月天数
        var currentDay = date.getDate();//当前日期
        var preDay = (firstDayOfMonth - 1 + 7) % 7;//左边补充的天数
        var beforeDay = []//true代表无效
        for (let i = 1; i <= preDay; i++) {
          beforeDay.push({
            name: beforeMonthDays - preDay + i,
            inval: true
          })
        }

        var afterDay = [], currentDays = [];
        for (let i = 0; i < 42 - currentMonthDays - preDay; i++) {
          afterDay.push({
            name: i + 1,
            inval: true
          })
        }
        //天气
        for (let i = 0; i < currentMonthDays; i++) {
          currentDays.push({
            name: i + 1,
            // inval: preDay >= i + 1 ? false : true,
            inval: currentDay+5 >= i + 1 ? false : true,
            isCurrent: currentDay == i + 1,
            status: (this.dayStatus[i] && this.dayStatus[i].status) || "1"
          })
        }
        this.day = beforeDay.concat(currentDays).concat(afterDay)
        //设置空气质量
        const that = this;
        getAction("/data/airAqi/aqiRecodeMonth",{month:new Date().format("yyyy-MM")}).then((res) => {
            if(res.success){
              res.result.forEach(aqiItem => {
                that.day = that.day.map(item => {
                    if(Number(item.name)===Number(aqiItem.dayTime.substr(8,2)) && item.inval===false){
                        item.status = aqiItem.weatherData
                    }
                    
                    return item;
                  })
              });
            }
        })
        
      }
    }
  }
</script>

<style scoped>
  .top-title {
    height: 32px;
    background: #FFFFFF;
    border-top: 1px solid #E5E5E5;
    border-bottom: 1px solid #E5E5E5;
    text-align: center;
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 900;
    color: rgba(0, 0, 0, 0.85);
    line-height: 32px;
    margin-bottom: 10px;
  }

  .aCard-content {
    padding: 16px;
    /* border: 1px solid #e8e8e8; */
  }

  .lengend {
    display: grid;
    grid-template-columns: 60px 60px 100px 100px 100px;
    margin: 0px 10px 10px 10px;
  }

  .lengend div:nth-child(5) {
    width: 100px;
  }

  .card-title {
    display: flex;
    flex: 1;
  }

  .peoblem-title {
    height: 50px;
    width: 110px;
    margin: 0px 5px;
    padding: 2px 0 0 10px;
    border-radius: 4px;
  }

  .lengend-circle {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 5px;
    border-radius: 8px;
  }

  .color1 {
    background-color: #1FD0A3;
    color: #fff;
  }

  .color2 {
    background-color: #0FA7E9;
    color: #fff;
  }

  .color3 {
    background-color: #FFC929;
    color: #fff;
  }

  .color4 {
    background-color: #F2775A;
    color: #fff;
  }

  .color5 {
    background-color: #EF5350;
    color: #fff;
  }

  .day-title {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    margin-bottom: 10px;
    justify-items: center;
    grid-gap: 10px;
  }

  .day-content {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(6, 1fr);
    text-align: center;
    grid-gap: 10px;
    justify-items: center;
  }

  .day-item {
    width: 24px;
    height: 24px;
    display: inline-block;
    text-align: center;
    line-height: 24px;
  }

  .today {
    border: 2px solid #F2775A;
  }
</style>
    echarts
    西安小哥
    1.3k 声望88 粉丝

    thinking、doing、do better、do much better than today。exchange 、sharing、improve as quickly as possible。

    « 上一篇
    Cesium开发实践
    下一篇 »
    常见的工作流方案对比

    引用和评论

    推荐阅读
    头像
    人工智能与人类未来如何共存

    西安小哥阅读 750

    头像
    全面解析ECharts、Luckysheet、DataX、Doris如何构建高效能数仓式中台

    软件部长阅读 209

    头像
    echarts map 黑龙江补全大兴安岭地图地理测绘数据type为MultiPolygon

    火阳阅读 125

    0 条评论
    得票最新