Echarts - Misaraty

ECharts（官网），一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

我修改的代码示例如下：

启用本地echarts，不依赖网络，

<!-- <script src="https://cdn.staticfile.org/echarts/4.7.0/echarts.js"></script> -->
<script src="./echarts.js"></script>

启用网络上echarts，

<script src="https://cdn.staticfile.org/echarts/4.7.0/echarts.js"></script>
<!-- <script src="./echarts.js"></script> -->

饼图（双击图片可交互）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网页标签</title>
<script src="https://cdn.staticfile.org/echarts/4.7.0/echarts.js"></script>
<!-- <script src="./echarts.js"></script> -->
</head>

<body>
<div id="main" style="width:600px; height:400px;"></div>
<script type="text/javascript">
var myChart=echarts.init(document.getElementById('main'));

var option = {
    title: {text:'标题',left:'center'},
  tooltip: {trigger:'item',formatter:"{a} <br/>{b}: {c} ({d}%)"},
    legend: {data:['A1','A2','A3'],left:'right',orient:'vertical',},
    series: [{name:'单位: ',type:'pie',data:[{value:200,name:'A1'},{value:150,name:'A2'},{value:300,name:'A3'}],itemStyle:{emphasis:{shadowBlur:10,shadowOffsetX:0,shadowColor:'rgba(0, 0, 0, 0.5)'}}}]
};

myChart.setOption(option);
</script>
</body>
</html>

环图（双击图片可交互）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网页标签</title>
<script src="https://cdn.staticfile.org/echarts/4.7.0/echarts.js"></script>
<!-- <script src="./echarts.js"></script> -->
</head>

<body>
<div id="main" style="width:600px; height:400px;"></div>
<script type="text/javascript">
var myChart=echarts.init(document.getElementById('main'));

var option = {
    title: {text:'标题',left:'center'},
  tooltip: {trigger:'item',formatter:"{a} <br/>{b}: {c} ({d}%)"},
    legend: {data:['A1','A2','A3'],left:'right',orient:'vertical',},
    series: [{name:'单位: ',type:'pie',radius:['45%','75%'],data:[{value:200,name:'A1'},{value:150,name:'A2'},{value:300,name:'A3'}],itemStyle:{emphasis:{shadowBlur:10,shadowOffsetX:0,shadowColor:'rgba(0, 0, 0, 0.5)'}}}]
};

myChart.setOption(option);
</script>
</body>
</html>

柱状图（双击图片可交互）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网页标签</title>
<script src="https://cdn.staticfile.org/echarts/4.7.0/echarts.js"></script>
<!-- <script src="./echarts.js"></script> -->
</head>

<body>
<div id="main" style="width:600px; height:400px;"></div>
<script type="text/javascript">
var myChart=echarts.init(document.getElementById('main'));

var option = {
    title: {text:'标题',subtext:'x-y',left:'center'},
  tooltip: {trigger:'axis',axisPointer:{type:'shadow'}},
  grid:{left:'3%',right:'4%',bottom:'3%',containLabel:true},
    legend: {data:['标签1','标签2'],left:'right'},
    xAxis: {data: ["A1","A2","A3","A4"],axisLabel:{formatter:'{value}'}},
    yAxis: {axisLabel:{formatter:'{value}'}},
    series: [{name:'标签1',type:'bar',barWidth:'30%',data: [5, 10, 20, 15]},{name:'标签2',type:'bar',barWidth:'30%',data: [40, 30, 20, 15]}]
};

myChart.setOption(option);
</script>
</body>
</html>

线图（双击图片可交互）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网页标签</title>
<script src="https://cdn.staticfile.org/echarts/4.7.0/echarts.js"></script>
<!-- <script src="./echarts.js"></script> -->
</head>

<body>
<div id="main" style="width:600px; height:400px;"></div>
<script type="text/javascript">
var myChart=echarts.init(document.getElementById('main'));

var option = {
    title: {text:'标题',subtext:'x-y',left:'center'},
  tooltip: {trigger:'axis',axisPointer:{type:'shadow'}},
  grid:{left:'3%',right:'4%',bottom:'3%',containLabel:true},
    legend: {data:['标签1','标签2'],left:'right'},
    xAxis: {min:0,max:5,type:'value',axisLine:{onZero:false},axisLabel:{formatter:'{value}'}},
    yAxis: {min:0,max:50,type:'value',axisLine:{onZero:false},axisLabel:{formatter:'{value}'}},
    series: [{name:'标签1',type:'line',areaStyle:{normal:{opacity:0.4}},smooth:true,symbolSize:15,symbol:'circle',data:[[1,5],[2,10],[3,20],[4,15]],markLine:{silent:true,data:[{xAxis:3.3},{yAxis:22}]}},
  //symbol: 'circle','rect'
  {name:'标签2',type:'line',areaStyle:{normal:{opacity:0.4}},smooth:true,symbolSize:15,symbol:'circle',data:[[1,40],[2,30],[3,15],[4,25]],markLine:{silent:true,data:[{xAxis:2.2},{yAxis:33}]},markPoint:{data:[{name:'特殊点',xAxis:2.5,yAxis:30}]},markArea:{silent:true,itemStyle:{normal:{color:'transparent',borderWidth:1,borderType:'dashed'}},data:[[{name:'区间',xAxis:2.6,yAxis:30},{xAxis:3.9,yAxis:10}]]},}]};

myChart.setOption(option);
</script>
</body>
</html>

柱状图_线图（双击图片可交互）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网页标签</title>
<script src="https://cdn.staticfile.org/echarts/4.7.0/echarts.js"></script>
<!-- <script src="./echarts.js"></script> -->
</head>

<body>
<div id="main" style="width:600px; height:400px;"></div>
<script type="text/javascript">
var myChart=echarts.init(document.getElementById('main'));

var option = {
    title: {text:'标题',subtext:'x-y',left:'center'},
  tooltip: {trigger:'axis',axisPointer:{type:'shadow'}},
  grid:{left:'3%',right:'4%',bottom:'3%',containLabel:true},
    legend: {data:['标签1','标签2'],left:'right'},
    xAxis: {data: ["A1","A2","A3","A4"],axisLabel:{formatter:'{value}'}},
    yAxis: {axisLabel:{formatter:'{value}'}},
    series: [{name:'标签1',type:'bar',barWidth:'40%',data:[5, 10, 20, 15]},{name:'标签2',type:'line',smooth:true,symbolSize:15,symbol:'circle',data:[40, 30, 20, 15]}]
  ////symbol: 'circle','rect'
};

myChart.setOption(option);
</script>
</body>
</html>