echarts初学实用笔记

以下这些是我最近经常用到的，做笔记总结一下！
vue中使用通常都是：
a:给定容器：

<div id='container'></div>

b:设置option:

import echarts from 'echarts'
export default{
	data(){
		return {
			option:{}
		}
	}
}

c:初始化echart

mounted(){
	let ec1 = echarts.init(document.getElementById('container'))
	ec1.setOption(this.option)
}

以下常用到的几种图，及其相关配置：
1.饼图‘pie’ ：【不涉及到 xAxis,yAxis和grid】
(1).legend( 小标题 )：

//布局
orient:'vertical' [列向] 或者'horizontal' [横向]
//位置
x:'center','left','right'
y:'bottom','top','middle'

(2).series ：设置数据

type:'pie',
name:'',
data:[ { value:,name:''} ],
radius:['50%','80%'], //饼图的大小，默认是实心的，设置这样的形式是呈一个圆环状，设置的是内外环半径的大小
center:['50%','30%'],// 设置这个饼图在容器中的位置（x,y）
avoidLabelOverlap:false,
label:{
    normal:{
        show:true,// 默认的饼图是有标签提示的显示每一对数据
        position:'inner', // 标签显示在环内：inner, 还有：center,outside
        formatter:'{c}'//这边设置成显示 value值，默认是 name
        //{a}：系列名
		{b}：数据名
		{c}：数据值
		{d}：百分比
    },
    emphasis:{
        show:true,//高亮显示label
        textStyle:{
            fontSize:'30',
            fontweight:'bold'
        }
    },
},
labelLine:{
    show:false //视觉引导线关闭
}

2.柱状图（bar）

grid:{
	//网格组件设置
	height:'150px',
	left:'10%',
	right:'10%',
	bottom:'25%'
},
xAxis:{
	type:'category' //坐标轴类型 默认 类目轴category；value:数值轴【适用于连续数据】 time:时间轴 log:对数轴
	data:[],
	minInterval:2, //坐标轴刻度跨越设置
	axisLine:{ // 坐标轴线设置
		show:true,
		lineStyle:{color:' xxx '}
	},
	axisTick:{ show: false }，//坐标轴刻度线设置成 不显示
	axisLabel:{ color:' xxx '}	// 坐标轴对应的文本标签设置
},
yAxis{
	type:'value',
	name:'xxx', //坐标轴名字
	axisLine:{ show:false},
	axisTick:{ show: false }，
	axisLabel:{ color:' xxx '}
}，
series:{
	type:'bar',
	data:[],
	barWidth:'5px', //柱子的宽度设置
	itemStyle:{
		//每个柱子的设置
		color: xxx",
		barBorderRadius:[5,5,0,0] //柱子的边框弧度设置，这边设置成顺时针走的边角弧度上左上右为5
	}
}

3.折线图（line）

grid:{
	height:'135px', 
	left:'20%',
	bottom:'20%',
},
xAxis: {
  	type: 'category',
   	minInterval:2,
   	axisLine:{
     	lineStyle:{ color:"#108ee9"}
 	},
   	axisTick:{show:false},
  	 data: [ ],
},
yAxis: {
    type: 'value',
    min:1,
    max:120,
    axisLine:{ show:false },
    axisTick:{show:false },
    axisLabel:{
        color:'#108ee9',
        formatter:'{value}.00' // 数轴标签的显示格式设置
    }
},
series: [
    {
        data: [ ],
        type: 'line',
        itemStyle:{
            color:"orange",
    	},
    	
        lineStyle:{ type:'dotted'},//线的样式
        
        markLine:{   //标记线的设置；详情看官方文档
            lineStyle:{
                color:'yellow'
            },
            data:[
                { yAxis:120},
                { yAxis:60},
                { yAxis:10},
                { yAxis:1}
            ],
            // 起始点和终点的标记
            symbol:['none','none']
        }
    },
]

4.既有柱状图和又有折线图
在柱状图的基础之上要添加一个多设置一个y轴和设置折线图的data

yAxis: [
	{
	   type: 'value',
	   name:'不良原因',
	   nameTextStyle:{ color:'#108ee9'},
   	   axisLine:{ show:false},
	   axisTick:{ show:false},
       axisLabel:{color:'#108ee9' }
	},
    {
       type: 'value',
       name:'累计比率',
       nameTextStyle:{color:'orange' },
       axisLine:{ show:false},
       axisTick:{ show:false},
       axisLabel:{color:'orange'}
   },
],
series: [
 {
     type: 'bar',
     name:'不良原因',
     barWidth:'10px',
     itemStyle:{
         color:"#108ee9",
         barBorderRadius:[5,5,5,5]
     },
     data: [ ],
 },
 {
     type:'line',
     name:'累计比率',
     itemStyle:{ color:'orange' },
     yAxisIndex: 1, // 折线图的呈现 ！！！！
     data:[]
 }
],

好啦，这是我今天做的笔记，目前使用到的相关就这么多！
总结下来感觉还是具体情况具体分析！！！多结合官方文档，实例化操作！！！Nice~~~

echarts初学实用笔记

猜你喜欢