HTML制作折线图_html折线图_#面向百度编程的博客-程序员宝宝

技术标签: 笔记  

Echarts资源下载:
(转自:
版权声明:本文为CSDN博主「青春已被放纵了」的原创文章
原文链接:https://blog.csdn.net/qq_36373262/article/details/65635667)

可以在这里下载最新资源:https://github.com/ecomfe/echarts/archive/2.2.1.zip 下不了的话就去官网去下。

方法一:自己敲代码

折线图代码:

<script src="../build/source/echarts.js" type="text/javascript"></script>   //echarts文件
<div style='background: #fff;width:900px;height:400px;margin:10px auto;'>
<div id="div1" style="width:900px;height:400px;border:1px solid #fff;margin:10px auto;background: #fff"></div>
</div>    //折线图背景(如果两个折线图放一起的话,两个div名称要不一样 )
<script type="text/javascript">
    require.config({
        paths: {
            echarts: '../build/dist' //引用资源文件夹路径,注意路径
        }
    });
    require(
        [
            'echarts',
            'echarts/chart/line'   // 按需加载所需图表,用到什么类型就加载什么类型,这里不需要考虑路径        
        ],
        function (ec) {
            var myChart = ec.init(document.getElementById('div1'));   //当前折线图的容器(两个折线图放一个页面时,div名称不一样)
            var ecConfig = require('echarts/config');
            var option = {
                title: {
                    text: '折线图名称',    //统计图标题名称
                    subtext:'副标题',                  //副标题      
                    x: 'center'                            
                },
                tooltip: {   //提示框
                    trigger: 'axis',  //触发类型  axis:坐标轴触发  item:项目触发
                    formatter: function (data) {        //自定义提示框 (参数自定义)
                            var r=data[0].data*10;
                            r=r.toFixed(2);  //保留两位小数
                            return data[0].name+'<br/>'+data[0].seriesName+'的销售量为:'+data[0].data+'<br/>利润为:'+r+'元';
                     }
                     /*  axis类型时  data是多个系列的数据数组
                     data[0].name   横坐标
                     data[0].seriesName   图例名称
                     data[0].data   纵坐标
                     
                     item类型时不是数组
                     */
                    
                },
                legend: {  //图例
                    data: ['三只松鼠'],
                    y: "bottom"
                },
                toolbox: {   //工具箱
                    show: true, //是否显示工具箱
                    saveAsImage: {} ,//下载工具
                    feature: {
                        mark: { show: true },  //辅助线开关
                        dataView: { show: true, readOnly: false },  //数据视图
                        magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
                        restore: { show: true },   //还原
                        saveAsImage: { show: true }  //保存为图片
                    }
                },
                //calculable: true,   折线图、柱状图是否叠加
                xAxis: [{  //x轴
                    type: 'category',
                    boundaryGap: false,   //拐点起始位置  false 从头开始; ture 从中间开始
                    data: ['一月份', '二月份', '三月份', '四月份', '五月份']
                   axisLabel: {
                                show: true,
                                textStyle: {
                                    fontSize: 14,    // 改变x轴字体大小
                                    color: 'red'       // 改变x轴字体颜色
                                }
                            }
                }],
                yAxis: [{   //y轴
                    type: 'value'
                    /*min:0, // 设置y轴刻度的最小值
                    max:1800,  // 设置y轴刻度的最大值
                    splitNumber:9,  // 设置y轴刻度间隔个数
                    */
                }
                ],
                series: [
                    {
                        name: '三只松鼠',
                        type: 'line',  //线条
                        smooth:0.5, //设置直线弧度 0-1之间
                        /*symbol:none  拐点消失
                         symbolSize:8   拐点圆点大小
                         itemStyle:{
                                    normal:{
                                        label : {
                                        show: true// 拐点上显示数值
                                    }
                                }
                                }
                       lineStyle:{
                            width:5,  // 设置线宽
                            type:'dotted'  //'dotted'虚线 'solid'实线
                        }
                         */
                        stack: '总量',  //多线条显示不对时把这个去掉
                        data:['1000','2000','2000','5000','3000']
                    }
                ]
            };
            myChart.setOption(option);
            //添加点击事件
            function eConsole(param) {

                //alert(option.series[0].data.length);  //长度

                //alert(option.series[0].data[i]);   //内容

                //param.dataIndex 获取当前点击索引,

                var index=param.dataIndex;
              }
            myChart.on("click", eConsole);
        }
    );
</script>

(代码一点错都不能有,少写一个逗号都会显示不出来,一定注意分号、逗号、引号、中括号)

效果图:

在这里插入图片描述

##方法二:在官网制作后复制代码

官网:https://www.echartsjs.com/examples/zh/index.html#chart-type-pie
在这里插入图片描述

直接修改复制代码即可

为饼状图添加点击事件:

function eConsole(param) {

                //alert(option.series[0].data.length);

                //alert(option.series[0].data[i]);

                //param.dataIndex 获取当前点击索引,

                var index=param.dataIndex;
              }
              myChart.on("click", eConsole);
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_44162239/article/details/103311706

智能推荐

如何 新建Vue项目_ZPeng_Yan的博客-程序员宝宝

首先:先从nodejs.org中下载nodejs双击安装,在安装界面一直Next直到Finish完成安装。打开控制命令行程序(CMD),检查是否正常使用淘宝NPM 镜像大家都知道国内直接使用npm 的官方镜像是非常慢的,这里推荐使用淘宝 NPM 镜像。$ npm install -g cnpm --registry=https://registry.npm.taobao.org这样就可以使用cnpm 命令来安装模块了:第二步项目初始化1.第一步:安装vue-clicn

【设计模式二十二之享元模式】享元模式详解_享元极其_^_^ 小小码nong的博客-程序员宝宝

享元模式Flyweight Pattern细说中介者模式细说享元模式定义UML模型基于UML的代码场景一场景代码场景二场景代码享元模式应用和注意事项细说中介者模式提示:博主:章飞 _906285288的博客博客地址:http://blog.csdn.net/qq_29924041细说享元模式定义UML模型基于UML的代码场景一场景代码场景二场景代码享元模式应用和...

STM32——硬件IIC主机通信_stm32iic通信_夜风~的博客-程序员宝宝

前言:根据网上的资料,大部分网友表示STM32自带的硬件IIC存在bug,读写时很容易卡死。自己在调试的时候也出现卡死的情况,最后一点一点调试,也还是调通了。本文将记录自己调试STM32硬件IIC主机的一些心得体会。硬件IIC从机通信见另一篇文章:传送门 。硬件平台:STM32F205软件平台:keil v5函数库:标准库硬件IIC主机初始化IIC的发送时序本文不不做介绍了...

D1,4CIF,CIF,QCIF各代表的分辨率大小_4cif 模式_lezhiyong的博客-程序员宝宝

D1:NTSC制式 720 × 486D1:PAL/SECAM制式 720 × 5764CIF:NTSC制式 640 × 4804CIF:PAL/SECAM制式704 × 576CIF:NTSC制式 320 × 240CIF:PAL/SECAM制式352 × 288CIF:NTSC制式160 × 120QCIF:PAL/SECAM制式176 × 144

随便推点

React之Hooks详解_南楼不知忆的博客-程序员宝宝

使用Hooks理由1.高阶组件为啦复用,导致代码层级复杂2.生命周期的复杂3.写成function组件,无状态组件,因为需要状态,又改成class,成本高useState(保存组件状态)import React, { useState } from 'react'export default function App() { // useState("kerwin") 返回一个数组 数组第一个参数是你传递的参数 第二个参数是一个方法 const [name, setName

Eclipse创建Maven项目报错:maven-compiler-plugin:3.1:compile…_颜艾青的博客-程序员宝宝

我在创建第一个Maven项目时报的错:虽然出现了这个错误,但是项目是可以看到的,如下图:可以看出与正常的项目相比,少了几项。打开pom.xml文件,会出现红色的小叉号(我忘记截图了,类似写Java代码时的系统纠错)。点击叉号可以看到这样的描述:CoreException:CouldnotgetthevalueforparametercompilerId……在搜集了许多资料之后,我终于找到了解决这个错误的方法:在Eclipse中使用 Alt+F5 快捷键,在弹出...

二本学计算机专业好吗,二本大学学计算机专业好的学政_weixin_39833290的博客-程序员宝宝

技校网专门为您推荐的类似问题答案问题1:湖北二本大学中哪个学校的计算机专业好二本中的相比一本来说是差了点滴,我就是个二本计算机专业的,武汉内的二本院校中比较好的有湖北工业大学,武汉工程大学,湖北经济学院,湖北中医学院也就是现在的湖北中医药大学,武汉工业学院,我觉得武汉工业学院的计算机方面的相比来说会好些,湖北工业大学的也还行,湖北工业大学主要的是机械类的,武汉工业学院最好的是食品类的,食品类在全国...

masm+for+windows+linux,Masm for windows集成实验环境_勃恩泽的博客-程序员宝宝

Masmforwindows集成实验环境是根据程序设计不是学会的,而是练会的理念针对汇编语言初学者的特点开发的汇编语言学习与实验软件,继承了原软件简单易用特点,方便用户练习网络上、电脑上、书本上的汇编程序而全新设计开发。相关软件软件大小版本说明下载地址Masm for windows集成实验环境是根据程序设计不是学会的,而是练会的理念针对汇编语言初学者的特点开发的汇编语言学习与实验软件,继承了原软...

rsyslog与loganalyzer_loganalyzer rsyslog_Micky_Yang的博客-程序员宝宝

1、rsyslog日志服务的概述rsyslog主要记录linux服务器上各发生的事件日志信息的,是多线程工作方式,可以通过TCP,UDP工作,也支持SSL,TLS,RELP;也支持把日志信息存储于数据库中,如MySQL,PGSQL,Oracle来实现日志存储。syslogd —&gt; 主要记录登录系统与网络等服务的信息klogd —&gt; 主要记录内核产生的各项信...

推荐文章

热门文章

相关标签