学废了吗_echarts折柱混合1

最新推荐文章于 2024-05-21 23:21:19 发布

码者_荣耀

最新推荐文章于 2024-05-21 23:21:19 发布

阅读量233

点赞数

文章标签： echarts 前端 javascript vue.js

本文链接：https://blog.csdn.net/Faker96/article/details/122161820

版权

<template>
  <div class="chart" ref="myChart"></div>
</template>

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

export default {
  data() {
    return {
      myChart: null,
    };
  },
  mounted() {
    this.initChart();
    this.getData().then((e) => {
      console.log('获取到data:', e);
      this.drawChart(e);
    });
  },
  methods: {
    initChart() {
      this.myChart = echarts.init(this.$refs.myChart); //初始化echarts绘图的dom
    },
    //一般请求数据都是异步的
    getData() {
      return new Promise((res) => {
        setTimeout(() => {
          res({
            series: ['中国', '日本', '加拿大', '美国', '英国', '老挝', '韩国', '朝鲜','hh', 'aa', 'bb', 'cc', 'dd', 'ee', 'ff', 'gg',],
            datas: [
              {
                series: ['男生总人数', '女生总人数', '男女比率'],
                datas: ['133', '122', '1.09'],
              },
              {
                series: ['男生总人数', '女生总人数', '男女比率'],
                datas: ['633', '222', '2.85'],
              },
              {
                series: ['男生总人数', '女生总人数', '男女比率'],
                datas: ['3333', '322', '10.4'],
              },
              {
                series: ['男生总人数', '女生总人数', '男女比率'],
                datas: ['4000', '39', '95.2'],
              },
              {
                series: ['男生总人数', '女生总人数', '男女比率'],
                datas: ['133', '122', '1.09'],
              },
              {
                series: ['男生总人数', '女生总人数', '男女比率'],
                datas: ['633', '222', '2.85'],
              },
              {
                series: ['男生总人数', '女生总人数', '男女比率'],
                datas: ['3333', '322', '10.4'],
              },
              {
                series: ['男生总人数', '女生总人数', '男女比率'],
                datas: ['4000', '39', '95.2'],
              },
              {
                series: ['男生总人数', '女生总人数', '男女比率'],
                datas: ['133', '122', '1.09'],
              },
              {
                series: ['男生总人数', '女生总人数', '男女比率'],
                datas: ['633', '222', '2.85'],
              },
              {
                series: ['男生总人数', '女生总人数', '男女比率'],
                datas: ['3333', '322', '10.4'],
              },
              {
                series: ['男生总人数', '女生总人数', '男女比率'],
                datas: ['4000', '39', '95.2'],
              },
              {
                series: ['男生总人数', '女生总人数', '男女比率'],
                datas: ['133', '122', '1.09'],
              },
              {
                series: ['男生总人数', '女生总人数', '男女比率'],
                datas: ['633', '222', '2.85'],
              },
              {
                series: ['男生总人数', '女生总人数', '男女比率'],
                datas: ['3333', '322', '10.4'],
              },
              {
                series: ['男生总人数', '女生总人数', '男女比率'],
                datas: ['4000', '39', '95.2'],
              },
            ],
          });
        }, 300);
      });
    },
    //获取到的data进行绘图
    drawChart(data) {
      let chartData = []; //图表数据
      let seriesName = data.datas[0].series; //各个series的名字

      //转换一下数据
      data.series.forEach((v, i) => {
        chartData.push([v, ...data.datas[i].datas]);
      });
      console.log(chartData)
      
      //echarts 配置项
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999',
            },
          },
        },
        legend: {
          data: seriesName,
          bottom: 0,
        },
        xAxis: [
          {
            type: 'category',
            axisPointer: {
              type: 'shadow',
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            max: 5000,
            name: '总人数',
          },
          {
            type: 'value',
            max: 100,
            name: '男女比例',
            axisLabel: {
              formatter: '{value} %',
            },
          },
        ],
        dataset: {
          source: chartData,
        },
        series: [
          {
            name: seriesName[0],
            type: 'bar',
            itemStyle: {
              color: '#00a3eb',
            },
          },
          {
            name: seriesName[1],
            type: 'bar',
            itemStyle: {
              color: '#23af4c',
            },
            barGap: 0,
          },
          {
            name: seriesName[2],
            type: 'line',
            yAxisIndex: 1,
            itemStyle: {
              color: '#e7222c',
            },
            lineStyle: {
              color: '#e7222c',
            },
            barGap: 0,
            smooth: true,
          },
        ],
      };

      //绘图
      this.myChart.setOption(option);

      //自适应
      window.onresize = () => {
        this.myChart.resize();
      };
    },
  },
  
};
</script>

<style>
.chart {
  margin: 20px auto;
  width: 80%;
  height: 600px;
}
</style>

</template>

import * as echarts from 'echarts';

export default {

data() {

return {

myChart: null,

};

mounted() {

this.initChart();

this.getData().then((e) => {

console.log('获取到data:', e);

this.drawChart(e);

});

methods: {

initChart() {

this.myChart = echarts.init(this.$refs.myChart); //初始化echarts绘图的dom

//一般请求数据都是异步的

getData() {

return new Promise((res) => {

setTimeout(() => {

res({

series: ['中国', '日本', '加拿大', '美国', '英国', '老挝', '韩国', '朝鲜','hh', 'aa', 'bb', 'cc', 'dd', 'ee', 'ff', 'gg',],

datas: [

{