第一次使用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绘图（心得）相关推荐

使用echarts（一）第一次使用echarts
第一次使用echarts 引入 ECharts <html lang="en"> <head><meta charset="UTF-8&qu ...
基于Django实现Linux运维管理平台的整个实现过程和各种API接口调用以及Echarts绘图项目介绍（一）记录点滴生活
基于Django实现Linux运维管理平台整个实现过程和各种API接口调用以及Echarts绘图的使用介绍项目内容涉及技术直通车: 我的项目仓库:MyGitHub https://github.co ...
《亚马逊云科技-游戏孵化营》第一次公开课学习心得
<亚马逊云科技助力游戏上云>第一次公开课学习心得一.开营演讲大致涉及内容 1.1 亚马逊云科技的优势 1.2 涉及服务 1.2.1 Amazon Nimble Studio 1.2.2 ...
Vue 中 Echarts绘图在一个圆环图或多个圆环图中间插入图片插入文字（考虑到浏览器大小兼容问题）
之前一直掉进这个坑,没有跳出来,导致自己在这个问题上搞了很久,今天把这个坑写出来,避免大家都去踩这个坑啊~ 在Vue项目结构中,如果引入图片的url不成功,记住,请一定要试一试在路径外加上 requi ...
Django博客来访人员地域分布大数据可视化---echarts绘图、geoip2获取地理位置
文章目录 Django博客来访人员地域分布大数据可视化---echarts绘图.geoip2获取地理位置效果 echarts作图 geoip2获取地理位置 api接口开发 ajax前后端动态交互 D ...
Echarts绘图技术总结
Echarts是百度发布的一种绘图工具,通过Echarts,我们可以绘制各种图形:包括折线图(Line).条形图(Bar).饼图(Pie).散点图(Scatter).地图(Map)等.今天我们来谈谈如 ...
Echarts使用心得总结——异步数据加载
异步加载 Echarts的数据一般是在初始化后setOption中直接填入的,但是很多时候可能数据需要异步加载后再填入.ECharts 中实现异步数据的更新非常简单,在图表初始化后不管任何时候只要使用 ...
微信小程序引用Echarts绘图显示模糊解决办法
因为毕设需要,这阵子我一直在研究小程序使用Echarts绘图. 偶然间发现了一个问题,小程序绘制出来的折线图显示非常的模糊(用我自己的话说就是2k显示器看720p电影的感觉). 经过查询找到了相应的解 ...
第一次面试前端实习生心得
今天第一次去面试前端岗位的实习生,公司规模不算大吧,不过也有好几个部门 .说说我的面试心得吧. 首先是hr面,如下是她问的问题:学这个多久了,大四还有没有课,是否只需完成毕业设计就行了不用上 ...

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

Echarts官网链接

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

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

第一次使用echarts绘图（心得）相关推荐

最新文章

热门文章