echars+vue 使用记录

---

1. vue+echars实现统计图表

<template>
  <div class="execution">
    <basic-container>
      <el-row :span="24">
        <el-col :span="6">
          年份：<br/><br/>
          <avue-date  type = "year" format="yyyy年" value-format="yyyy" placeholder="请选择年份"></avue-date> <el-col :span="24"></el-col>
        </el-col>
      </el-row>
      <div id="lineEChartsDiv" style="width: 600px;height:400px;"></div>
    </basic-container>
  </div>
</template>


<script>
    import {incomeStatisticsReport} from "@/api/report/incomeStatistics";
    var echarts = require('echarts');
    export default {
        name: "incomeStatistics",
        data() {
            return {
                monthList: [],
                priceData: [],
                countData: [],
                option : {
                    color: ['#3398DB'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        left: '%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis:
                        {
                            type: 'category',
                            data: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
                            axisTick: {
                                alignWithLabel: true
                            }
                        },
                    yAxis:[
                        {
                            type: 'value',
                            name: '收入金额',

                        },
                        {
                            type: 'value',
                            name: '数量',
                            show:true,

                        }
                        ],
                    legend: [
                        {
                            data: [{name : "收入金额"},{name : "人数"}],

                        },
                        {
                            data:["数量"],
                        }
                    ],
                    series: []
                }
            }
        },

        watch: {},
        methods: {
            createLineECharts(){
                var echartObj = echarts.init(document.getElementById('lineEChartsDiv'));
                echartObj.setOption(this.option);
            },
        },
        mounted() {
            incomeStatisticsReport().then(res =>{
                for (let i  = 0;i < 12;i++){
                    this.priceData.push(res.data.data.workOrderPrice[i].price);
                }
                for (let i = 0;i < res.data.data.workOrderCount.length;i++){
                    this.countData.push(res.data.data.workOrderCount[i].value);
                }

                this.option.series = [
                    {
                        name:"收入金额",
                        type: 'bar',
                        barWidth: '60%',
                        data: this.priceData,
                        color:['#13afdb']
                    },
                    {
                        name:"人数",
                        type: 'line',
                        barWidth: '60%',
                        yAxisIndex: 1,
                        data: this.countData,
                        color:['#28db48']
                    }
                ];
                this.createLineECharts();
            });

        },
        created() {
        }

    }
</script>

<style scoped>

</style>

2.echars实现3D效果柱状图

效果图：

option: {
        grid: {
          left: "20",
          top: "40",
          right: "20",
          bottom: "10%",
        },
        xAxis: {
          show:false,
          type: 'category',
        },
        yAxis: {
          show:false,
          type: "value",
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130, 150, 80, 70, 110, 130],
            stack: "zs",
            type: "bar",
            barMaxWidth: "auto",
            barWidth: 12,
      		itemStyle: {
              color: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                type: "linear",
                global: false,
                colorStops: [
                  {
       				offset: 0,
                    color: "#3397bc",
                  },
                  {
                    offset: 1,
                    color: "#3b7bb9",
                  },
                ],
              },
            },
          },
          {
            data: [300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300],
            stack: "zs",
            type: "bar",
            barMaxWidth: "auto",
            barWidth: 12,
            color:"#062b4f",
          },
		  {
            data: [120, 200, 150, 80, 70, 110, 130, 150, 80, 70, 110, 130],
            type: "bar",
            stack: "zh",
            barMaxWidth: "auto",
            barWidth: 12,
            barGap:'0%',
			itemStyle: {
              color: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                type: "linear",
                global: false,
				colorStops: [
                  {
                    offset: 0,
                    color: "#44d8fc",
                  },
                  {
                    offset: 1,
                    color: "#3b7bb9",
                  },
               ],
              },
            },
          },
          {
            data: [300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300],
            stack: "zh",
            type: "bar",
            barMaxWidth: "auto",
            barWidth: 12,
            color:"#083256",
          },
          //下面的立体
          {
            data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
            type: "pictorialBar",
            barMaxWidth: "20",
            symbol: "diamond",
            symbolOffset: [0, "50%"],
            symbolSize: [24, 12],
      		zlevel: 2,
            color: "#3b7bb9"
          },
          //上面的立体
          {
            data: [120, 200, 150, 80, 70, 110, 130, 150, 80, 70, 110, 130],
            type: "pictorialBar",
            barMaxWidth: "20",
            symbolPosition: "end",
            symbol: "diamond",
            symbolOffset: [0, "-50%"],
            symbolSize: [24, 12],
            zlevel: 2,
            color: "#38e3ff",

            itemStyle: {
              normal: {
	              label: {
	                  show: true, //开启显示
	                  position: 'top', //在上方显示
	                  textStyle: { //数值样式
	                    color: '#3398bc',
	                    fontSize: 16
	                  }
	                  }
              }
            },
          },
       	{
            data: [300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300],
            type: "pictorialBar",
            barMaxWidth: "20",
            symbolPosition: "end",
            symbol: "diamond",
            symbolOffset: [0, "-50%"],
            symbolSize: [24, 12],
            zlevel: 2,
            color: "#073355",
          }
        ]
      },