Echarts在项目中的使用

Echarts的基本使用

• 获取

npm install echarts --save

• 引入

//main.js
import echarts from 'echarts'
Vue.prototype.$echarts= echarts

• 使用

<template>
<!--为Echarts准备一个具备宽度的DOM容器-->
	<div ref='procesChart' style='width:500px;height:500px;margin:0 auto'></div>
</template>

<script>
	//基于准备好的dom，初始化echarts实例
    //echarts.init初始化一个echarts实例
    let myChart = this.$echarts.init(this.$refs.processChart)
    let option = {...}
     //使用setOption生成图表
    myChart.setOption(option)
</script>

Echarts组件

1.title组件

标题组件（主标题和副标题）

<script>
option = {
    //标题组件
    title:{
         show: 'true'    // 默认显示标题组件
		text:'{textSS|标题}'   		//主标题文本，支持\n换行
		textStyle:{
                color:'',
        		fontStyle:'italic',
        		fontWeight:'100',    //100-400,
        		lineHeight:56,    //未设置lineHeight，默认取父层级的lineHeight 56
        		//rich 自定义富文本样式
                rich:{
					textSS： {
						color:''
        				...
                    }
            },
            subtext:''     //副标题文本
            subtextStyle:{
                color:''
                ...
            },
            textAlign:'auto'      //主标题和副标题的水平对齐方式
            textVerticalAlign:'auto'  //主副标题的垂直对齐方式
    }
}
</script> 

2.legend组件

图例组件

<script>
    option={
        legend:{
             type:'plain'，      //plain:普通图例 | scroll 可滚动翻页的图例，当图例数量较多时使用
            left|top|right|bottom: 20| 20% ，       //图例组件离容器的距离，
            itemWidth|itemHeight:xx             //图例标记的图形宽高
            //使用格式化图例文本（字符串模板或回调函数）
            formatter: 'Legend{name}'
            //或
            formatter:function(name){
                return 'Legend'+name
            },
            icon:'circle'       //图例项的icon    circle|rect|roundRect|triangle|diamond|pin|arrow|none
            // 默认不显示，如果legend文字很多时，手动对文字做裁剪并开启tooltip
             formatter:function(name){
                return echarts.format.truncateText(name, 40, '14px Microsoft Yahei', '…');
            },
            tooltip:{
                show:true
            }
            textStyle:{
                rich:{
                    Legend:{
                        color:''
                        ...
                    }
                }
            },
            data:['检验数'，'合格数']     //两个图例
            //或者强制修改某一项
                data:[{
                    name:'合格数'，
                    icon:'triangle'
                }]
        }，
        //！！！！！设置默认