直接放代码吧~:
还是先放个图吧,省的相不中了。_。这个是两个柱和一个折线。那个柱没有数据所以没显示。
贴个使用方式:
this.option.xAxis[0].data = res.data.days;
this.option.series[0].data = res.data.total;
this.option.series[1].data = res.data.sell;
this.option.series[2].data = res.data.count;
this.$nextTick(() => {
this.initChart();
window.addEventListener('resize', this.wsFunc);
});
wsFunc() {
this.myChart.resize();
},
下面是配置代码:
option: {
tooltip: {
trigger: 'axis',
},
toolbox: {},
legend: {
data: ['订单金额', '订单实收', '订单数'],
},
color: ['#1495EB', '#00CC66', '#F9D249', '#ff9900', '#9860DF'],
grid: {
left: 16,
right: 25,
bottom: 10,
top: 40,
containLabel: true,
},
xAxis: [
{
type: 'category',
axisLine: {
lineStyle: {
color: '#D7DDE4',
},
},
axisTick: {
alignWithLabel: true,
lineStyle: {
color: '#D7DDE4',
},
},
splitLine: {
show: false,
lineStyle: {
color: '#F5F7F9',
},
},
// axisPointer: {
// type: 'shadow'
// },
axisLabel: {
interval: 0,
rotate: 40,
textStyle: {
color: '#7F8B9C',
},
},
data: [],
},
],
yAxis: [
{
type: 'value',
name: '金额',
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
textStyle: {
color: '#7F8B9C',
},
},
splitLine: {
show: true,
lineStyle: {
color: '#F5F7F9',
},
},
},
{
type: 'value',
name: '数量',
minInterval: 1,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
textStyle: {
color: '#7F8B9C',
},
},
splitLine: {
show: true,
lineStyle: {
color: '#F5F7F9',
},
},
// axisLabel: {
// formatter: '{value} °C'
// }
},
],
series: [
{
name: '订单金额',
type: 'bar',
itemStyle: {
normal: {
color: {
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#69cdff',
},
{
offset: 0.5,
color: '#3eb3f7',
},
{
offset: 1,
color: '#1495eb',
},
],
},
},
},
data: [],
},
{
name: '订单实收',
type: 'bar',
itemStyle: {
normal: {
color: {
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#fab2ff',
},
{
offset: 1,
color: '#1904e5',
},
],
},
},
},
data: [],
},
{
name: '订单数',
type: 'line',
itemStyle: {
normal: {
color: {
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#6fdeab',
},
{
offset: 0.5,
color: '#44d693',
},
{
offset: 1,
color: '#2cc981',
},
],
},
},
},
data: [],
yAxisIndex: 1,
},
],
},