echarts使用

echarts使用

<template>
          <div class="marginB" style="width:80%;margin: 0 auto;">
            <div
              id="main2"
              style="float:left;width:100%;height: 500px;margin: 0 auto;"
            ></div>
            <div
              id="awardsdata"
              :style="{ width: '1300px', height: '500px' }"
            ></div>
          </div>
</template>
<script>
// 引入基本模板
const echarts = require("echarts/lib/echarts");
// 引入柱状图组件
require("echarts/lib/chart/bar");
// 引入折线图组件
require("echarts/lib/chart/line");
export default {
	data() {
	
	},
	  mounted() {
	    this.inquire();
	  },
	methods: {
	
		//    柱状图/折线图
		initDate2() {
	      let myChart = echarts.init(document.getElementById("main2"));
	      const data1 = {
	        //  数据格式
	        categories: [
	          "四川移动本部",
	          "成都分公司",
	          "绵阳分公司",
	          "自贡分公司",
	          "攀枝花分公司",
	          "广元分公司",
	          "达州分公司",
	          "泸州分公司",
	          "广安分公司",
	          "巴中分公司",
	          "遂宁分公司",
	          "宜宾分公司",
	          "内江分公司",
	          "乐山分公司",
	          "德阳分公司",
	          "南充分公司",
	          "眉山分公司",
	          "阿坝分公司",
	          "甘孜分公司",
	          "凉山分公司",
	          "天府新区分公司"
	        ],
	        values: [
	          10,
	          20,
	          30,
	          40,
	          50,
	          60,
	          70,
	          80,
	          90,
	          100,
	          0,
	          3.1,
	          5.9,
	          66,
	          5.5,
	          39,
	          11,
	          32,
	          33,
	          30,
	          34
	        ]
	      };
	      // 绘制柱状图
	      myChart.setOption({
	        color: [ // 颜色
	          "rgb(53,160,255)",
	          "rgb(190,70,45)",
	          "rgb(86,206,71)",
	          "rgb(193,63,200)"
	        ],   //   对应下标的图形颜色 
	        title: {
	          //  标题
	          text: "集中项目安排与使用进度", //主标题
	          x: "center", //x轴方向对齐方式
	          top: 10,   
	          textStyle: {
	            fontSize: 16   //  字体大小
	          }
	        },
	        grid: {    //   调整图表显示间距  {x:"10%",y:"10%",x2:"10%",y2:"10%"}
	          bottom: "20%",
	        },
	        tooltip: {
	          // 提示框
	          trigger: "axis",
	          axisPointer: {
	            type: "shadow"
	          },
	          /****
	          *  调整提示框显示的内容的另一种写法
	          *                          标题                 圆点 /颜色                                        内容{c} + %
	          * formatter: "<div> {b} <br/> <span style=\"display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:rgb(90,146,255);\"></span> 进度 : {c} %<br/> </div>"
	          */
	          formatter: function(params) { // 调整提示框显示的内容
	            var htmlStr = "";
	            htmlStr += "<div>" + params[0].name + "<br/>";
	            for (var i = 0; i < params.length; i++) {
	              let data = params[i];
	              //前面的原点和他的颜色
	              htmlStr +=
	                data.marker + data.seriesName + ":" + data.value + "%<br/>";
	            }
	            htmlStr += "</div>";
	            return htmlStr;
	          }
	        },
	        legend: {
	          // 图例
	          // orient: 'vertical',  // vertical  竖着显示
	          // right: 50,
	          top: 35, // 调整图例的位置
	          data: [
	            "整体立项进度",
	            "分公司平均立项",
	            "集中项目报销进度(含供应链出入库数据)",
	            "时间进度"
	          ]
	        },
	        toolbox: { //  工具栏
	          show: true,
	          orient: "vertical",
	          left: "right",
	          top: "center",
	          feature: {
	            mark: { show: true },
	            dataView: { show: true, readOnly: false },
	            magicType: { show: true, type: ["line", "bar", "stack"] },
	            restore: { show: true },
	            saveAsImage: { show: true }
	          }
	        },
	        xAxis: {    //  x轴
	          type: "category",
	          axisTick: { show: false, interval: 0, rotate: 30 },
	          data: data1.categories,
	          axisLabel: {
	            interval: 0, //  设置间隔为0
	            rotate: 45 //代表逆时针旋转
	          }
	        },
	        yAxis: [  // y轴
	          {
	            type: "value",
	            name: "",
	            axisLabel: {
	              formatter: "{value} %"  //  y轴数据后+%
	            }
	            // min: -10
	          }
	        ],
			/****
			*   横向显示   更换type的值 
			* xAxis: {
			* type: "value",
		    *      axisLabel: {
		    *       formatter: "{value} %"
		    *     }
			* },
			* yAxis: [
			* 	{
			* 		type: "category",
			* 		data: [],
			* 		axisLabel: {
			* 			interval: 0 //  设置间隔为0
			* 		}
			* 	}
			* ]
			*/
	        series: [
	          //  一个公司 几个对象  几根柱子/折线
	          {
	            name: "整体立项进度",
	            type: "bar",
	            data: data1.values //  预算总金额
	            /****
	            * label: {   //  设置数据在图形右方显示
                * 	show: true, // 开启显示
                * 	// rotate: 70, // 旋转70度
                * 	position: 'right', // 在右方显示
                * 	distance: 20, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
                *	 verticalAlign: 'middle',
                * 	textStyle: { // 数值样式
                *  	 	color: 'black',
                *  		fontSize: 12
                * 	},
                * 	formatter: '{c}%'
                * }
	            */
	          },
	          {
	            name: "分公司平均立项",
	            type: "line",
	            //  stack: "one",   堆叠图
	            data: data1.values, //  预算总金额
	          },
	          {
	            name: "集中项目报销进度(含供应链出入库数据)",
	            type: "line",
	            //  stack: "one",   堆叠图
	            data: data1.values //  预算总金额
	          },
	          {
	            name: "时间进度",
	            type: "line",
	            //  stack: "one",   堆叠图
	            data: data1.values //  预算总金额
	          }
	        ]
	      });
	    },
	
		//   初始化 echarts 数据  
		 async inquire(){  
		 	await  this.$nextTick(()=>{  //  在dom数据渲染完成后 初始化echarts  
		 		this.initDate2()
		 	})
		 }
	},
}
</script>