echarts 百度开源图标工具demo

最新推荐文章于 2023-07-03 19:39:59 发布

CrazyDogWang

最新推荐文章于 2023-07-03 19:39:59 发布

阅读量1.2k

点赞数 1

本文链接：https://blog.csdn.net/CrazyDogWang/article/details/50624177

版权

本文回顾了Echarts的基本用法，通过一个全面的demo，展示了如何使用Echarts绘制各种图表，解决了官方demo在复杂场景下指导不足的问题。代码示例包含了所有Echarts图表类型，简化了配置过程，方便开发者快速上手。尽管在处理大量数据时可能效率不高，但对于初学者和快速原型设计极具价值。

摘要由CSDN通过智能技术生成

最近翻起前段时间粗略学习过的echarts，竟然不会了，赶紧温习一下顺便发个博客记录下来。这个demo类似与echarts官网给出的demo，但本人觉得官网给出的demo 并不是很好，只适合初学者看一下运行机制，当涉及到其他类型的图表时，需要修改的地方demo中并没有做详细的说明，导致我在一开始使用的时候摸不着头脑。下面提供一种简单粗暴的方式来使用echarts，本代码，可以实现当前版本echarts的所有图表绘制，而且不需要相关网的demo进行修改路径等配置。但在进行大量数据的绘制时候我觉得速度肯定是不会比官网的单个例子快的。话不多说直接上代码，附上我的echarts-all.js

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>

<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:400px"></div>
    <!--一次性加载所有echarts的表单类型 无需单个配置路径和js-->
    <script src="js/echarts-all.js"></script>
    <script type="text/javascript">

    	// var myChart = ec.init(document.getElementById('main')); 
    	var myChart = echarts.init(document.getElementById('main')); 
    	<!--option到官网上取即可-->
    	var option = {
		    title : {
		        text: 'iphone销量',
		        subtext: '纯属虚构',
		        x:'center'
		    },
		    tooltip : {
		        trigger: 'item'
		    },
		    legend: {
		        orient: 'vertical',
		        x:'left',
		        data:['iphone3','iphone4','iphone5']
		    },
		    dataRange: {
		        min: 0,
		        max: 2500,
		        x: 'left',
		        y: 'bottom',
		        text:['高','低'],

最低0.47元/天解锁文章

CrazyDogWang

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
echarts 百度开源图标工具demo

最近翻起前段时间粗略学习过的echarts，卧槽，竟然不会了，赶紧温习一下顺便发个博客记录下来。这个demo类似与echarts官网给出的demo，但本人觉得官网给出的demo 并不是很好，只适合初学者看一下运行机制，当涉及到其他类型的图表时，需要修改的地方demo中并没有做详细的说明，导致我在一开始使用的时候摸不着头脑。下面提供一种简单粗暴的方式来使用echarts，本代码，可以实现当前版本e
复制链接

扫一扫