Vue项目&ECharts开源可视化库

安装

本开源库主要是用来进行图表的组件使用，可以减少自己编程的代码量，同时也提供了大量属性，供开发者灵活使用
在Vue控制台输入

npm install echarts --save

导入

在main.js中导入

import echarts from “echarts”;
Vue.prototype.$echarts = echarts;

使用

实例：
1.柱形图实例

<template>
	<!-- 父组件 -->
	<div style="position: absolute;left: 335px;top: 353px;">
	    <div id="main2" style="width: 500px;height:300px;display: inline-block;"></div><!-- 这就是引用的方法用id -->
	  </div>
    
</template>

<script>
	export default {
	  name: "blankL",
	  methods: {
	    drawChart() {
	      // 基于准备好的dom，初始化echarts实例    下面的东西都是创建一个柱形图具体区分还需要看官网
	      let myChart = this.$echarts.init(document.getElementById("main2"));
	      // 指定图表的配置项和数据
	      let option = {
			  title: {
			    text: "单会话消息数统计",
			    left: "top",
			    top: "left",
			    textStyle: {
			      fontSize:18,
			      fontWeight: 400,
			      color: '#333333'
			    }
			  },
    color: ['#3398DB'],
    tooltip: {
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            data: ['0-10s', '10-20s', '20-30s', '30-40s', '40s+'],
            axisTick: {
                alignWithLabel: true
            }
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: '会话数:',
            type: 'bar',
            barWidth: '50%',
            data: [5, 2, 4, 10, 3]
        }
    ]
};

	      // 使用刚指定的配置项和数据显示图表。
	      myChart.setOption(option);
	    }
	  },
	  mounted() {
	    this.drawChart();
	  }
	};

</script>

<style>

</style>

2.扇形图实例：

<template>
	<div style="position: absolute;left: 344px;top:700px;">
	    <div id="main" style="width: 500px;height:300px;display: inline-block;"></div>
	  </div>
</template>

<script>
	export default {
	  name: "shanxing",
	  methods: {
	    drawChart() {
	      // 基于准备好的dom，初始化echarts实例
	      let myChart = this.$echarts.init(document.getElementById("main"));
	      // 指定图表的配置项和数据
	      let option = {
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
		 x: '400px',
		 y: '100px',
        orient: 'vertical',
        right: 10,
        data: ['未解决','已解决']
    },
	title: {
	  text: "问题解决率占比",
	  left: "top",
	  top: "left",
	  textStyle: {
	    fontSize:18,
	    fontWeight: 400,
	    color: '#333333'
	  }
	},
	color: ['#1A7DFE','#FF9138'],
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '30',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                {value:  300, name: '未解决'},
                {value: 880, name: '已解决'},
                // {value: 234, name: '联盟广告'},
                // {value: 135, name: '视频广告'},
                // {value: 1548, name: '搜索引擎'}
            ]
            }
        ]
       };
	      // 使用刚指定的配置项和数据显示图表。
	      myChart.setOption(option);
	    }
	  },
	  mounted() {
	    this.drawChart();
	  }
	};

</script>

<style>

</style>

这里不过多举例，单纯进行简单的用法。

使用细节

图标参数（X坐标，标题，Y坐标，图示等等）

注意： 查看扇形图，折线图等具体参数可以点击这里进入查看

官方API文档查询

链接: 点击官网API文档

官方现有实例导入（推荐初学者ME）

1. 点击进入查看实例模型
2. 选择其中一个打开
3. 复制所有代码
   
   4.加入到本文所给实例模板中