一、引入
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', // 触发类型为 axisaxisPointer: {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 和 valuetooltipStr += '<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，noneitemWidth: 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，来将标题向上移动。
