具体可以参考官网文档，已经写的很详细了：个性化图表样式
ECharts 提供了丰富的自定义配置选项，并且能够从全局、系列、数据三个层级去设置数据图形的样式。ECharts 中的饼图主要是通过扇形的弧度表现不同类目的数据在总和中的占比，它的数据格式比柱状图更简单，只有一维的数值，不需要给类目。因为不在直角坐标系上，所以也不需要xAxis，yAxis。饼图的Data包含 name 和 value 属性的对象。
第一步：导入Echarts的JS文件：
<script type="text/javascript" src="js/mon.min.js" ></script>
第二部：为Echarts的图表创建一个容器：
<div id="chartmain" style="width:600px; height: 400px;"></div>
第三部：填充容器：
<script type="text/javascript">var mycharts=echarts.init(document.getElementById("chartmain"));mycharts.setOption({//设置全局背景色backgroundColor: '#2c343c',//设置文字颜色textStyle: {color: 'rgba(255, 255, 255, 0.3)'},//设置标题title:{backgroundColor:'rgb(128, 128, 128)',text:"Echarts数据统计"},series:[{name:'访问来源',type:'pie',roseType: 'angle',//设置南丁格尔图的配置项radius:'55%',//文字颜色等也可以在系列中单独设置，使用label标签/*label: {normal:{textStyle: {color: 'white'},}},*///设置饼图的视觉引导线labelLine: {normal:{lineStyle: {color: 'rgba(255, 255, 255, 0.3)'}}},itemStyle: {//阴影的配置// 阴影的大小shadowBlur: 200,// 阴影水平方向上的偏移shadowOffsetX: 0,// 阴影垂直方向上的偏移shadowOffsetY: 0,// 阴影颜色shadowColor: 'rgba(0, 0, 0, 0.5)',//鼠标 hover 时候的高亮样式emphasis: {shadowBlur: 200,shadowColor: 'rgba(0, 0, 0, 0.5)'}},data:[{value:235,name:'视频广告'},{value:274, name:'联盟广告'},{value:310, name:'邮件营销'},{value:335, name:'直接访问'},{value:400, name:'搜索引擎'}]}]})</script>
效果图：
下面是柱形图的展示，如果需要展示折线图，只需要把type改成line就可以了：
<body><div id="chartmain" style="width:600px; height: 400px;"></div><script type="text/javascript">//指定图标的配置和数据var option ={title:{text:"Echarts数据统计"},tooltip:{},legend:{data:['用户来源']},xAxis:{data:["Android","IOS","PC","Other"]},yAxis:{},series:[{name:'访问量',type:'bar',data:[500,200,360,100]}]}var mycharts=echarts.init(document.getElementById("chartmain"));mycharts.setOption(option);</script></body>
