快速上手echarts

echarts基本使用

1. 引入echarts.min.js
2. 获取dom元素
3. 初始化echarts实例：echarts.init(dom);
4. 配置图表样式 var option = {…};
5. dom.setOption(option);

图表的配置项和数据

var option = {
	backgroundColor: '#2c343c' //设置全局背景
	textStyle: { color: 'rgba(255, 255, 255, 0.3)' }//设置全局字体样式

	title: {
		text: '图表标题', //支持 \n
		//设置位置
		left: "center|left|right|像素值|相对于容器高宽的百分比", 
		top: "40%",
		textStyle: {
		  color: "#fff",
		  fontSize: 10, 
		  fontWeight: 200
		}
	},
	//提示框
	tooltip: {
		show:true,
		trigger:'item|axis|none',//触发类型
	},
	//图例
	legend: {
		data: ['销量'],
		orient: 'vertical',//图例列表的布局朝向
		//图例标记的宽高位置
		itemWidth: 10,
		itemHeight: 2,
		right: 5,
		icon: 'circle',//标记类型
		textStyle: {
		  fontSize: 5,
		  fontWeight: 800
		},
	}, 
	xAxis: {
		type: 'category',
		data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]，
		//坐标值
		axisLabel: {  
		  fontSize: 5,
		  show: true,
		  interval: 0,// 显示x轴所有坐标值
		}, 
		//去掉轴刻度线
		axisTick: {
		  show: false
		},
		//取消显示坐标轴
		axisLine: {
		  show: false
		}
	},
	yAxis: {
		type: 'value',
		name: '单位：吨',
		//文字水平对齐方式
		nameTextStyle: {
			align: 'right',
			color: '#19aaf6'
		},
		interval: 200,//设置坐标轴分割间隔
		splitLine: {
			show: true,  //显示坐标轴在 grid 区域中的分隔线。横向网格线
			lineStyle: {
			  color: '#666d79'
			  // opacity:0.5
			}
		  },
	},
	//网格线可以调整大小和位置
	grid: {
	    left: 40,
	    top: 60,
		lineStyle: '#c8cbcf',//网格线颜色
	 },
	series: [{
		name: '销量',//系列名称{a}，用于tooltip的显示，legend的图例筛选
		type: 'bar',//图表类型 ： line ,pie
		data: [5, 20, 36, 10, 10, -20],
		itemStyle: {
			color: '#da1793'
		  },
		label: {  //数据标签-数据值
			show: true,
			position: 'bottom',
			offset: [0, 100],//文字偏移 ：横向，纵向
			//设置每个系列的文本
			textStyle: {
			  color: 'blue'
			}
		},
	}]
};

饼图：

series:[
	{
		type:'pie',
		radius:'55%',
		//radius: ['30%', '55%'], //内半径，外半径
		minAngle: 30, //最小角度
		startAngle: 210, //起始角度
		color: ["#00AEFF","#284AC6"],
		center: ['46%', '50%'],  //[横坐标,纵坐标]
		 selectedOffset:0,//选中扇区的偏移距离
		roseType:'angle',//南丁格尔图
		data: [ //数组 每个数组元素是对象格式
        { 
			value: 235, 
			name: '视频广告' ,
			selected:true,// 该数据项是否被选中
			//设置每个扇区的颜色
			itemStyle: {
				color: '#18b0ff',
			}, 
		},
        { value: 274, name: '联盟广告' }, 
      ],
	 
	  label: {
		position: 'inner' ,//数据标签写在内部
		//字符串模板，模板变量 ：  a:系列名 b：数据名 c:数据值 d:百分比
		formatter: '{a|{b}}:{n|{c}}{a|万吨}\n\n', 
		
		/*内边距 padding:[上，下,左，右]
		 padding:4表示 [4,4,4,4]
		 padding:[3,4] 表示 [3,4,3,4]*/
		
		padding: [0, -80],
		fontSize: 6,
		rich: {//富文本框
		  n: {
			fontSize: 10,
			color: '#fff'
		  },
		  a: {
			fontSize: 5,
			color: '#fff'
		  }
		}
	  },
	  labelLine: {
		  show: false ,//不显示视觉引导线样式
		  length: 20, //半径方向的长度 视觉引导线第一段
		  length2: 80, //横向的长度 视觉引导线第二段
		  borderRadius: 3,
		  lineStyle: {
		    type: 'solid',// dotted,dashed  视觉引导线 线型
		    color: '#ccc'
		  }
	  },

	}
],
 

默认选中扇区

myChart.dispatchAction({
  type: "highlight",
  seriesIndex: 0,
  dataIndex: 0,
})
myChart.on("mouseover", function (e) {
  if (e.dataIndex != index) {
    chart.dispatchAction({
      type: "downplay",
      seriesIndex: 0,
      dataIndex: index,
    })
  }
})
myChart.on("mouseout", function (e) {
  index = e.dataIndex
  chart.dispatchAction({
    type: "highlight",
    seriesIndex: 0,
    dataIndex: e.dataIndex,
  })
})

折线图

series:[
	{
		type:'line',
		smooth: true,
		symbolSize: 1,
		showSymbol: false,//不显示圆点
		// symbol:'none',//没有圆点
		symbol: 'circle', //设置折线上的点类型		
		symbolSize: 3,//设置线两端的标记大小
		lineStyle: {
			width: 1//设置线条粗细
		},
		//高亮样式
		emphasis: {
			itemStyle: {
			  color: '#18b0ff',
			  borderColor: '#fff',
			}
		},
	}
]

dataset

dataset: {
    // 提供一份数据。
    source: [
      ['product', '有限天津分公司', '有限上海分公司', '有限深圳分公司', '有限湛江分公司'],
      ['1月', 1100, 700, 900, 780],
      ['2月', 120, 700, 800, 780],
      ['3月', 1100, 700, 1000, 600],
	 ],
	  // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
	   series: [
		 { type: 'bar', color: '#64fcab', barMinWidth: 4 },
		 { type: 'bar', color: '#242e3f', barMinWidth: 4 },
		 { type: 'bar', color: '#18b0ff', barMinWidth: 4 }, 
	   ]
	 

原生元素组件

  graphic: {
    elements: [
      {
        type: "text",//文字组件
        left: "60%",
        top: "40%",
        z: 10,
        style: {
          text: "35%",
          textAlign: "center",
          fill: "#fff",
          fontSize: 8,
          fontWeight: 700
        }
      },
      {
        type: 'image',//图形组件
        style: {
          image: "img/oil_03.png",
          width: 17,
          height: 17
        },
        left: 'center',
        top: '95'
      },
    ]
  }

感谢阅读，将持续补充及更新 ~