echarts饼图与堆叠柱状图格式以及月份最后一天年份年份最后一天

今晚来我家吗

已于 2022-07-11 15:51:28 修改

阅读量521

点赞数

文章标签： echarts 前端 javascript

于 2022-06-21 17:56:02 首次发布

本文链接：https://blog.csdn.net/qq_43059898/article/details/125395862

版权

柱状图

option = {
tooltip: {
trigger: ‘axis’,
axisPointer: {
type: ‘shadow’
}
},
legend: {},
grid: {
left: ‘3%’,
right: ‘4%’,
bottom: ‘3%’,
containLabel: true
},
xAxis: [
{
type: ‘category’,
axisLabel: {
rotate: 60
},
data: [‘Mon’, ‘Tue’, ‘Wed’, ‘Thu’, ‘Fri’, ‘Sat’, ‘Sun’]
}
],
yAxis: [
{
type: ‘value’
}
],
series: [
{
name: ‘保养’,
type: ‘bar’,
stack: ‘Ad’,
emphasis: {
focus: ‘series’
},
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: ‘技能’,
type: ‘bar’,
stack: ‘Ad’,
emphasis: {
focus: ‘series’
},
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: ‘职业’,
type: ‘bar’,
stack: ‘Ad’,
emphasis: {
focus: ‘series’
},
data: [150, 232, 201, 154, 190, 330, 410]
}
]
};

饼图
var fontColor = “#fff”;
var data = [
{
name: “中央”,
value: 456,
},
{
name: “自治区”,
value: 231,
},
{
name: “盟市”,
value: 121,
},
{
name: “旗县区”,
value: 45,
},
{
name: “整合资金”,
value: 154,
},
{
name: “其他”,
value: 67,
},
];

option = {
color: [
“#bf19ff”,
“#854cff”,
“#5f45ff”,
“#02cdff”,
“#314976”,
“#f9e264”,
“#f47a75”,
“#009db2”,
“#024b51- 0780cf”,
“#765005”,
],
backgroundColor: “#0f375f”,
title: {
text: 7789,
subtext: “总计”,
textStyle: {
color: “#f2f2f2”,
fontSize: 40,
},
subtextStyle: {
fontSize: 30,
color: [“#ff9d19”],
},
x: “center”,
y: “center”,
},
tooltip: {
trigger: “item”,
formatter: “{b}
{c}亿元 ({d}%)”,
},
legend: {
bottom:15,
textStyle: {
color: “#f2f2f2”,
fontSize: 15,
},
data: data,
},
series: [
{
radius: [“50%”, “80%”],
center: [“50%”, “50%”],
type: “pie”,
label: {
position: “inner”,
formatter: “{d}%”,
},
labelLine: {
normal: {
show: true,
},
emphasis: {
show: true,
},
},
data: data,
}
]
};

饼图调整

var data = [
{
name: “保养”,
value: 456,
},
{
name: “技改”,
value: 231,
},
{
name: “交机”,
value: 121,
},
{
name: “巡检”,
value: 45,
},
{
name: “维修”,
value: 154,
},
];

option = {
color: [
“#2D9AFF”,
“#FF939A”,
“#86E2B6”,
“#B8A3FB”,
“#F9D010”
],
tooltip: {
trigger: “item”,
formatter: “{b}
{c}亿元 ({d}%)”,
},
legend: {
bottom:15,
textStyle: {
color: “#000”,
fontSize: 15,
},
data: data,
},
series: [
{
radius: [“50%”, “80%”],
center: [“50%”, “50%”],
type: “pie”,
label: {
position: “inner”,
formatter: “{d}%”,
},
labelLine: {
normal: {
show: true,
},
emphasis: {
show: true,
},
},
data: data,
}
]
};

let someDate = new Date(2021 , 6, 0)  6月最后一天
let someYear = new Date( 2021 , 0 , 0) 年份最后一天
console.log( someDate ,someYear, '六月的最后一天')
    // 月分最后一天
let someDate = new Date(Number(this.year), Number(this.month), 0)
// 年份最后一天
let someYear = new Date(Number(this.year), 0, 0)
// 月分最后一天
let someDate = new Date(Number(this.year), Number(this.month), 0)
// 年份最后一天
let someYear = new Date(Number(this.year), 0, 0)
// console.log(moment(someDate).format('DD'),'每月最后一天')
// console.log(moment(someYear).format('DD'),'每年最后一天')
// 开始日期
let start = this.barState ? `${this.year}-${this.month}-01` : `${this.year}-01-01`;
let startEnd = this.barState ? `${this.year}-${this.month}-${moment(someDate).format('DD')}` : `${this.year}-12-${moment(someYear).format('DD')}`;

堆叠柱状图格式处理
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      function isNullArr(datas) {
        let objectArr = {
          交机: [],
          海外: [],
          巡检: [],
          维修: [],
          保养: [],
          技改: [],
          召请: [],
        };
        //   遍历对象
        for (let key in datas) {
          // 将null进行赋值操作
          if (datas[key] == null) {
            datas[key] = {
              交机: [],
              海外: [],
              巡检: [],
              维修: [],
              保养: [],
              技改: [],
              召请: [],
            };
          } else {
            datas[key] = { ...objectArr, ...datas[key] };
            // console.log(datas[key])
          }
        }
        return datas;
      }

      let orderStatistics = {
        20220701: { 维修: [{ name: 1 }] },
        20220704: { 维修: [], 保养: [{ name: 4 }] },
        20220705: null,
      };
      let res = isNullArr(orderStatistics);
      console.log(res);

      let dateList = [];
      let nameList = [];

      for (var date in res) {
        // console.log(date)
        dateList.push(date);
      }
      dateList.forEach((item) => {
        for (var date in res[item]) {
          if (nameList.indexOf(date) == -1) {
            nameList.push(date);
          }
        }
      });

      let s = {};
      nameList.forEach((items) => {
        s[items] = [];
        dateList.forEach((item, index) => {
          s[items].push(res[item][items] ? res[item][items].length : 0);
        });
      });
      console.log(s);
      let zhuArr = []
      // 自定义柱状图颜色
      for (var name in s) {
            zhuArr.push({
              name: name,
              type: 'bar',
              barWidth: 5,
              stack: 'Search Engine',
              emphasis: {
                focus: 'series'
              },
              itemStyle: {//自定义颜色
                normal: { color: { '交机': '#2D9AFF', '海外': '#FF939A', '巡检': '#86E2B6', '维修': '#B8A3FB', '保养': '#F9D010', '技改': '#3CB371', '召请': '#00FF00', }[name] },
              },
              data: s[name]
            })
          }
          console.log(dateList )
        console.log(zhuArr)
         
    </script>
  </body>
</html>


饼图格式以及颜色
let arr = [ { name: '交机', color: '#2D9AFF', value: 0 },
              { name: '海外', color: '#FF939A', value: 0 },
              { name: '巡检', color: '#86E2B6', value: 0 },
              { name: '维修', color: '#B8A3FB', value: 0 },
              { name: '保养', color: '#F9D010', value: 0 },
              { name: '技改', color: '#3CB371', value: 0 },
              { name: '召请', color: '#00FF00', value: 0 }]
      console.log(arr )




饼图计算总数 vue
<template>
    <div class="ten-exchartsl">
        <div class="echarts-box">
            <div class="ten-box" id="tenl"></div>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
    data() {
        return {
            list: [
                {
                    name: '中央',
                    value: 456
                },
                {
                    name: '自治区',
                    value: 231
                },
                {
                    name: '盟市',
                    value: 121
                },
                {
                    name: '旗县区',
                    value: 45
                },
                {
                    name: '整合资金',
                    value: 154
                },
                {
                    name: '其他',
                    value: 67
                }
            ],
            sumData: 0
        };
    },
    mounted() {
        this.getData();
    },
    methods: {
        getData() {
            this.$nextTick(() => {
                this.getIndex();
            });
        },
        getIndex() {
            var myChart = echarts.init(document.getElementById('tenl'));
            myChart.off('legendselectchanged'); //解决重复触发
            let number = 0;
            this.list.forEach(item => {
                number += item.value;
            });

            let option = {
                color: [
                    '#bf19ff',
                    '#854cff',
                    '#5f45ff',
                    '#02cdff',
                    '#314976',
                    '#f9e264',
                    '#f47a75',
                    '#009db2',
                    '#024b51- 0780cf',
                    '#765005'
                ],
                backgroundColor: '#0f375f',
                title: {
                    text: number,
                    subtext: '总计',
                    textStyle: {
                        color: '#f2f2f2',
                        fontSize: 40
                    },
                    subtextStyle: {
                        fontSize: 30,
                        color: ['#ff9d19']
                    },
                    x: 'center',
                    y: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{b}<br/> {c}亿元  ({d}%)'
                },
                legend: {
                    bottom: 15,
                    textStyle: {
                        color: '#f2f2f2',
                        fontSize: 15
                    },
                    data: this.list
                },
                series: [
                    {
                        radius: ['50%', '80%'],
                        center: ['50%', '50%'],
                        type: 'pie',
                        label: {
                            position: 'inner',
                            formatter: '{d}%'
                        },
                        labelLine: {
                            normal: {
                                show: true
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        data: this.list
                    }
                ]
            };
            myChart.on('legendselectchanged', e => {
                let nameArray = [];
                for (let key in e.selected) {
                    nameArray.push({ title: key, isTitle: e.selected[key] });
                }
                let arr = []
                 arr = this.list.reduce((pre, cur) => {
                    let target = pre.find(ee => ee.title == cur.name);
                    if (target) {
                        Object.assign(target, cur);
                    } else {
                        pre.push(cur);
                    }
                    return pre;
                }, nameArray);

                // 计算
                let number = 0;
               arr.forEach(item => {
                    if (item.isTitle) {
                        if(item.value) {
                        number += item.value;
                        }
                    }
                });
                option.title.text = number;
                myChart.setOption(option);
            });
            myChart.setOption(option, true);
        }
    }
};
</script>

<style scoped>
.ten-exchartsl {
    /* padding: 0px 16px; */
    margin-top: 10px;
    width: 100%;
    margin-bottom: 20px;
}

.ten-box {
    height: 500px;
}
</style>