第一次使用echarts绘图（心得）

Echarts官网链接

我就是用这个实例图来绘制的，突然感觉echarts用起来好简单，哈哈

我下载了官方实例后，进行了相应的修改，下面是我的代码：

<div class="row" id="container" style="height: 200px;width: 100%;"> <div><script type="text/javascript">//下面的数据是我从数据库中得来的数据var x_data = <?php echo json_encode($x_array);?>;var submit_data = <?php echo json_encode($submit_array);?>;var ac_data = <?php echo json_encode($ac_array);?>;var c_data = <?php echo json_encode($c_array);?>;var cpp_data = <?php echo json_encode($cpp_array);?>;var java_data = <?php echo json_encode($java_array);?>;var python_data = <?php echo json_encode($python_array);?>;var dom = document.getElementById("container");var myChart = echarts.init(dom);var app = {};option = null;option = {title: {text: '安徽科技学院在线评测系统近一个月提交情况'},tooltip: {trigger: 'axis'},//这里的颜色是指legend的颜色color:['#00FFFF','#00FF00','#FFFF00','#FF7D00','#FF33FF','#0000FF'],legend: {data:['提交','正确','C','C++','JAVA','Python']},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},toolbox: {feature: {saveAsImage: {}}},xAxis: {type: 'category',boundaryGap: false,data: x_data},yAxis: {type: 'value'},series: [{ smooth:true,//平滑曲线name:'提交',type:'line',stack: '提交',data:submit_data,lineStyle:{//这里的颜色是每一条曲线的颜色color:'#00FFFF'}},{smooth:true,name:'正确',type:'line',stack: '正确',data:ac_data,lineStyle:{color:'#00FF00'}},{smooth:true,name:'C',type:'line',stack: 'C',data:c_data,lineStyle:{color:'#FFFF00'}},{smooth:true,name:'C++',type:'line',stack: 'C++',data:cpp_data,lineStyle:{color:'#FF7D00'}},{smooth:true,name:'JAVA',type:'line',stack: 'JAVA',data:java_data,lineStyle:{color:'#FF33FF'}},{smooth:true,name:'Python',type:'line',stack: 'Python',data:python_data,lineStyle:{color:'#0000FF'}}]};if (option && typeof option === "object") {window.onresize = myChart.resize;//为了让echarts表格自适应myChart.setOption(option, true);}</script> </div> </div>

legend的颜色和曲线的颜色一一对应后，你的图表就会非常漂亮啦，鼠标放到曲线上会显示具体数值，鼠标放到图例上会显示相应曲线上的每一点，非常好看，就像点亮的灯泡

总结

以上是生活随笔为你收集整理的第一次使用echarts绘图（心得）的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。