echarts的简单用法

喜欢ヅ旅行 2022-06-08 10:12 144阅读 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 条评论，144人围观）

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

相关阅读

相关 echarts formatter用法

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

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

相关 KVC的简单用法

// // KVCDemo.h // OC基础学习 // // Created by 麦子 on 15/6/2. //

叁歲伎倆/ 2022年08月05日 02:42/ 0 赞/ 152 阅读

相关 adb的简单用法

一：运行adb 1.直接运行在你的android—IDE中找到D:\\android\\adt-bundle-windows-x86\_64-20131030\\sdk\

向右看齐/ 2022年07月16日 04:23/ 0 赞/ 343 阅读

相关 PopupWindow的简单用法

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

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

相关 echarts的简单用法

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

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

相关 HttpURLConnection的简单用法

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

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

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

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

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

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

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

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

相关 vue+echarts的用法

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

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

相关 Git的简单用法

远程建库 1. ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9

迈不过友情╰/ 2021年07月24日 22:58/ 0 赞/ 420 阅读