Echarts

一、引入

npm install echarts --save

柱状图：

option = {
  //X轴参数各种配置
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] //X轴数据
  },
  //Y轴参数各种配置
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130], //y轴数据
      type: 'bar'
    }
  ]
};

后端数据接收

// 假设 jsonData 是从后端返回的 JSON 数据
const jsonData = {
  'Datelist': [],
  'product': [
    {
      name: 'bjmg',
      data: [320, 302, 301, 334, 390, 330, 320],
    },
    {
      name: 'gsufp',
      data: [320, 302, 301, 334, 390, 330, 320],
    }
    // 其他产品数据...
  ],
  'sum': [320, 302, 301, 334, 390, 330, 320]
};

// 将 jsonData 转换为 ECharts 的 series 配置
const seriesData = jsonData.product.map(item => {
  return {
    name: item.name, // 使用 JSON 中的 name 作为 series 名称
    type: 'bar',
    stack: 'total',
    barWidth: 80,
    label: {
      show: true,
      textStyle: {
        fontSize: 25
      }
    },
    emphasis: {
      focus: 'series'
    },
    data: item.data // 使用 JSON 中的 data 作为 series 数据
  };
});

// 然后将转换后的 seriesData 添加到 ECharts 配置中
const option = {
  // ... 其他 ECharts 配置项
  series: seriesData
};

// 使用生成的 option 初始化 ECharts 图表
// myChart.setOption(option);

完整代码：

<template>
  <div ref="chartDom" style="width: 600px; height: 400px;margin-top: 100px;"></div>
</template>

<script>
import * as echarts from 'echarts';
import { Tooltip } from 'element-ui';
import { color } from 'zrender';

export default {
  name: 'EchartsHome',
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const chartDom = this.$refs.chartDom;
      const myChart = echarts.init(chartDom);
      const option = {
        title: {
          text: '周订单统计', // 主标题文本
          // subtext: '副标题文本',     // 副标题文本，可选
          left: 'center',            // 标题水平居中
          top: -10,  
                     // 标题显示在顶部
          textStyle: {
            fontSize: 40,            // 标题文字大小
            color: '#333'            // 标题文字颜色
          },
      
        },
        // 设置 Tooltip 的样式
        tooltip: {
          extraCssText: 'white-space: wrap;', // 额外的 CSS 样式
          trigger: 'axis', // 触发类型为 axis
          axisPointer: {
            type: 'shadow' // 使用阴影作为坐标轴指示器
          },
          formatter: function (params) {
            // params 是一个数组，包含了每个数据项的详细信息
            var tooltipStr = '';
            console.log(params);
            let sum = 0;
            params.forEach(function (item, index) {
              // 为每个数据项添加一个分隔符
              if (index !== 0) {
                tooltipStr += '<br/>';
              }
             
              sum = sum + item.value;
              
              // 使用 item 来访问数据点的信息，例如 seriesName 和 value
              tooltipStr += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + item.color + '"></span>' + item.seriesName + ' : ' + item.value +'';
            });
            tooltipStr = tooltipStr + '<br/>' + '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:red"></span>'+'总数：'+sum;
            return tooltipStr;
          }
        },
        legend: {},
        grid: {
          left: '3%',
          right: '5%',
          bottom: '3%',
          containLabel: true//是否包含坐标轴的标签。
        },
        textStyle: {
          // color: '#fff',
          fontSize:20
        },
        color: ['#5470c6', '#91cc75', '#fac858', '#ee6666','#73c0de', '#3ba272', '#fc8452' ,'#9a60b4' ,'#ea7ccc'],
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          axisLabel: {
            fontSize: 18, // 设置X轴文字大小
            color: '#333' // 设置X轴文字颜色
          }
        },
        yAxis: {
          type: 'value',
          min: 0, // 设置Y轴的最小值
          max: 2000, // 设置Y轴的最大值
          axisLabel: {
            fontSize: 18, // 设置y轴文字大小
            color: '#333' // 设置y轴文字颜色
          }
        },
        // 顶部介绍
        legend: {
          top: '1%', // 控制 板块控制器的位置
          right:'-50%',
          right: 'right',
          icon: 'roundRect',//形状  类型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，none
          itemWidth: 50,  // 设置宽度
          itemHeight: 19, // 设置高度
          itemGap: 10, // 设置两个legend之间的间距
          fontSize: 20
        },
        series: [
          {
            name: '北京咪咕',
            type: 'bar',
            stack: 'total',  两个柱子的 stack值相同时就会堆叠放置
            barWidth: 80, // 柱子宽度
            showBackground: false, // 是否展示背后的阴影
            label: {
              show: true,
              textStyle: {
                fontSize: 25     // 底部订单具体数据的字体大小
              },
            },
            emphasis: {
              focus: 'series'
            },
            data: [320, 302, 301, 334, 390, 330, 320]
          },
          {
            name: '重庆电费',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
              textStyle: {
                fontSize: 25     // 底部订单具体数据的字体大小
              },
            },
            emphasis: {
              focus: 'series'
            },
            data: [120, 132, 0, 134, 90, 230, 210]
          },
          {
            name: '上海融合',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
              textStyle: {
                fontSize: 25     // 底部订单具体数据的字体大小
              },
            },
            emphasis: {
              focus: 'series'
            },
            data: [220, 0, 191, 234, 290, 330, 310]
          },
          {
            name: '瑞幸咖啡',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
              textStyle: {
                fontSize: 25     // 底部订单具体数据的字体大小
              },
            },
            emphasis: {
              focus: 'series'
            },
            data: [150, 212, 3, 154, 190, 330, 410]
          },
          {
            name: '甘肃饭票',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
              textStyle: {
                fontSize: 25     // 底部订单具体数据的字体大小
              },
            },
            emphasis: {
              focus: 'series'
            },
            data: [80, 87, 1, 34, 5, 30, 4]
          },
          // 
        ]
      };

      myChart.setOption(option);
    }
  }
};
</script>

<style>
/* 根据需要添加样式 */
</style>

在 ECharts 中，调整标题位置可以通过设置 top 属性来实现。如果您想要将标题向上调整，您可以减小 top 属性的值。例如，如果您当前的 top 设置为 'top'，您可以将其更改为一个具体的像素值，如 10，来将标题向上移动。