echarts的简单用法

喜欢ヅ旅行 2022-06-08 10:12 87阅读 0赞

1.js部分，将echarts.js引入，通过setoption的方法传入数据，

<script src="js/echarts.js"></script>
    		<SCRIPT type="text/javascript">
    $(document).ready(function () {
        var myChart = echarts.init(document.getElementById('echartsWarp'));
    	
        // 指定图表的配置项和数据
        option = {
    	    title: {
    	        text: '折线图堆叠'
    	    },
    	    tooltip: {
    	        trigger: 'axis'
    	    },
    	    legend: {
    	        data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
    	    },
    	    grid: {
    	        left: '3%',
    	        right: '4%',
    	        bottom: '3%',
    	        containLabel: true
    	    },
    	    toolbox: {
    	        feature: {
    	            //saveAsImage: {}
    	        }
    	    },
    	    xAxis: {
    	        type: 'category',
    	        boundaryGap: false,
    	        data: ['周一','周二','周三','周四','周五','周六','周日']
    	    },
    	    yAxis: {
    	        type: 'value'
    	    },
    	    series: [
    	        {
    	            name:'邮件营销',
    	            type:'line',
    	            stack: '总量',
    	            data:[120, 132, 101, 134, 90, 230, 210]
    	        },
    	        {
    	            name:'联盟广告',
    	            type:'line',
    	            stack: '总量',
    	            data:[220, 182, 191, 234, 290, 330, 310]
    	        }
    	    ]
    	};
    
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        
    });

2.html的部分：

<div id="echartsWarp" style="width: 400px;height:260px;"></div>

发表评论取消回复

表情：

评论列表（有 0 条评论，87人围观）

还没有评论，来说两句吧...

相关阅读

相关 echarts formatter用法

ECharts 中 formatter 是一个格式化函数，用于格式化提示框(tooltip)和图例(legend)中的文本显示。其函数接收一些参数，返回格式化后的字符串，以在图

快来打我*/ 2024年03月25日 11:31/ 0 赞/ 26 阅读

相关 ListView的简单用法

由于手机上的屏幕空间有限，能够一次性在屏幕上显示的内容并不多，当程序需要展示大量的数据时就要用到listview,如我们常用的QQ聊天，微博消息等。使用L

冷不防/ 2022年09月29日 11:59/ 0 赞/ 191 阅读

相关 NVelocity的简单用法

1.下载最新版的Nvelocity的dll文件并且引用 2.新建一个类，用来调用Nvelocity： ![Center][] 3.初始化模板的设置 ![Cente

ゞ浴缸里的玫瑰/ 2022年09月18日 14:50/ 0 赞/ 192 阅读

相关 PopupWindow的简单用法

首先创建弹出框的布局 layout\_popupwindow <?xml version="1.0" encoding="utf-8"?> <LinearL

客官°小女子只卖身不卖艺/ 2022年07月15日 10:44/ 0 赞/ 222 阅读

相关 echarts的简单用法

1.js部分，将echarts.js引入，通过setoption的方法传入数据， <script src="js/echarts.js"></script>

喜欢ヅ旅行/ 2022年06月08日 10:12/ 0 赞/ 88 阅读

相关 HttpURLConnection的简单用法

　使用HttpURLConnection来访问网络，首先需要获取它的实例，它需要new 一个URL对象，例如URL url = new URL("http://www.baid

淩亂°似流年/ 2022年05月19日 04:21/ 0 赞/ 205 阅读

相关 JQuery简单的用法

$(".subkey").click(function()\{ $(this).toggleClass("down"); $(this).parent(

比眉伴天荒/ 2022年05月09日 01:38/ 0 赞/ 335 阅读

相关 c# @ $ $@的简单用法

public void Test() { //1.字符串可直接换行 //特别注意:结果包含了隐藏

深碍√TFBOYSˉ_/ 2022年03月01日 18:50/ 0 赞/ 303 阅读

相关 echarts绘制表图的简单用法

目录前言安装依赖包全局引用效果图前言 [ECharts][]，一个使用 JavaScript 实现的开源可视化库，遵循 Apac

秒速五厘米/ 2021年10月19日 09:18/ 0 赞/ 334 阅读

相关 vue+echarts的用法

最近开发后台管理时用到了echarts这个组件，在使用过程中也遇到坑。 1. 我们首先需要将写一个具备高宽的 DOM 容器。 <div style="width

柔光的暖阳◎/ 2021年10月19日 05:46/ 0 赞/ 253 阅读