ucharts 混合图表 mix

改背景颜色需要用行内样式（允许横向滚动）：

<qiun-data-charts type="column" :canvas2d='false' canvasId='canvans3' :onzoom="true" :ontouch="true"
            :opts="opts3" :chartData="oxygen" background="rgba(245,245,245,1)" />

注意：yAxis.data至少有一项，不然会报错: [ { position: "left", title: "" } ]

示例：opts: {
          canvasId: 'sdfsdf3',
          color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
          padding: [15, 15, 0, 15],
          enableScroll: true,
          legend: {
            show: false
          },
          xAxis: {
            type: 'grid',
            gridType: 'dash',
            itemCount: 2, //x轴单屏显示数据的数量，默认为5个
            scrollShow: true, //新增是否显示滚动条，默认false
            scrollAlign: 'left', //滚动条初始位置
            scrollBackgroundColor: '#eee', //默认为 #EFEBEF
            scrollColor: '#DEE7F7', //默认为 #A6A6A6
          },
          yAxis: {
            gridType: "dash",
            dashLength: 2,
            data: [{
              position: "left",
              title: ""
            }]
          },
          extra: {
            mix: {
              column: {
                width: 20
              }
            }
          }
        }

<template>
  <view class="charts-box">
    <qiun-data-charts 
      type="mix"
      :opts="opts"
      :chartData="chartData"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      chartData: {},
      //您可以通过修改 config-ucharts.js 文件中下标为 ['mix'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
      opts: {
        color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
        padding: [15,15,0,15],
        enableScroll: false,
        legend: {},
        xAxis: {
          disableGrid: true,
          title: "单位：年"
        },
        yAxis: {
          disabled: false,
          disableGrid: false,
          splitNumber: 5,
          gridType: "dash",
          dashLength: 4,
          gridColor: "#CCCCCC",
          padding: 10,
          showTitle: true,
          data: [
            {
              position: "left",
              title: "折线"
            },
            {
              position: "right",
              min: 0,
              max: 200,
              title: "柱状图",
              textAlign: "left"
            },
            {
              position: "right",
              min: 0,
              max: 200,
              title: "点",
              textAlign: "left"
            }
          ]
        },
        extra: {
          mix: {
            column: {
              width: 20
            }
          }
        }
      }
    };
  },
  onReady() {
    this.getServerData();
  },
  methods: {
    getServerData() {
      //模拟从服务器获取数据时的延时
      setTimeout(() => {
        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
        let res = {
            categories: ["2018","2019","2020","2021","2022","2023"],
            series: [
              {
                name: "曲面",
                type: "area",
                style: "curve",
                data: [70,50,85,130,64,88]
              },
              {
                name: "柱1",
                index: 1,
                type: "column",
                data: [40,{"value":30,"color":"#f04864"},55,110,24,58]
              },
              {
                name: "柱2",
                index: 1,
                type: "column",
                data: [50,20,75,60,34,38]
              },
              {
                name: "曲线",
                type: "line",
                style: "curve",
                color: "#1890ff",
                disableLegend: true,
                data: [70,50,85,130,64,88]
              },
              {
                name: "折线",
                type: "line",
                color: "#2fc25b",
                data: [120,140,105,170,95,160]
              },
              {
                name: "点",
                index: 2,
                type: "point",
                color: "#f04864",
                data: [100,80,125,150,112,132]
              }
            ]
          };
        this.chartData = JSON.parse(JSON.stringify(res));
      }, 500);
    },
  }
};
</script>

<style scoped>
  /* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
  .charts-box {
    width: 100%;
    height: 300px;
  }
</style>