Echarts:折现图表案例

最新推荐文章于 2024-03-29 04:51:34 发布
最新推荐文章于 2024-03-29 04:51:34 发布
阅读量1.7k 收藏 2
点赞数
分类专栏： javascript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011066470/article/details/51487483
版权

第一步：引入相应的js文件

 <script type="text/javascript" src="js/jqcloud-1.0.4.js"></script>
  <script language="javascript" src="js/jquery-1.8.2.min.js"></script>

  <script type="text/javascript" src="js/echarts-2.2.7/build/dist/echarts.js"></script>

第二步：定义一个div，将生成的数据，填充给它。

 <div  style="width:800px;height:500px;" id="dataUpdate">
    </div>

第三步：实现的代码

 <script type="text/javascript">

 
 $(document).ready(function(){
  alert("1111");
  test();
  });


function test(){
 // 路径配置
        require.config({
            paths: {
                echarts: 'js/echarts-2.2.7/build/dist'
            }
        });

        //数据更新趋势
  require(
             [
                 'echarts',
                 'echarts/chart/line' // 使用柱状图就加载line模块，按需加载
             ],
             function (ec) {
                 // 基于准备好的dom，初始化echarts图表
                 var myChart = ec.init(document.getElementById('dataUpdate'));
     option = {
    title : {
        text: '某楼盘销售情况',
        subtext: '纯属虚构'
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:['意向','预购','成交']
    },
    toolbox: {
        show : true
  
    },
    calculable : true,
    xAxis : [
        {
            type : 'category',
            boundaryGap : false,
            data : ['周一','周二','周三','周四','周五','周六','周日']
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'成交',
            type:'line',
            smooth:true,
            itemStyle: {normal: {areaStyle: {type: 'default'}}},
            data:[10, 12, 21, 54, 260, 830, 710]
        },
        {
            name:'预购',
            type:'line',
            smooth:true,
            itemStyle: {normal: {areaStyle: {type: 'default'}}},
            data:[30, 182, 434, 791, 390, 30, 10]
        },
        {
            name:'意向',
            type:'line',
            smooth:true,
            itemStyle: {normal: {areaStyle: {type: 'default'}}},
            data:[1320, 1132, 601, 234, 120, 90, 20]
        }
    ]
};
                   
      // 为echarts对象加载数据
                 myChart.setOption(option);
             }
         );

 

}

 

  </script>

 

第四：运行结果：

二。带点击事件的折线图：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <link rel="stylesheet" type="text/css" href="css/jqcloud.css"/>
    <script type="text/javascript" src="js/jqcloud-1.0.4.js"></script>
  <script language="javascript" src="js/jquery-1.8.2.min.js"></script>
   <script type="text/javascript" src="js/easyui/jquery.easyui.min.js"></script>

  <script type="text/javascript" src="js/echarts-2.2.7/build/dist/echarts.js"></script>


  <script type="text/javascript">

 
 $(document).ready(function(){
  alert("1111");
  test();
  });


function test(){
 // 路径配置
        require.config({
            paths: {
                echarts: 'js/echarts-2.2.7/build/dist'
            }
        });

        //数据更新趋势
  require(
             [
                 'echarts',
                 'echarts/chart/line' // 使用柱状图就加载line模块，按需加载
             ],
             function (ec) {
                 // 基于准备好的dom，初始化echarts图表
                 var myChart = ec.init(document.getElementById('dataUpdate'));
       myChart.on('click', function (param) {
                      var name=param.name;
       var value=param.value;
       alert(name+">>"+value);
       $("#showarea").html("选中的值为："+name+">>>"+value);
                       alert('点击了我！');
            });
     option = {
    title: {
        text: '堆叠区域图'
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis : [
        {
            type : 'category',
            boundaryGap : false,
            data : ['周一','周二','周三','周四','周五','周六','周日']
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'邮件营销',
            type:'line',
            stack: '总量',
            areaStyle: {normal: {}},
            data:[120, 132, 101, 134, 90, 230, 210]
        },
        {
            name:'联盟广告',
            type:'line',
            stack: '总量',
            areaStyle: {normal: {}},
            data:[220, 182, 191, 234, 290, 330, 310]
        },
        {
            name:'视频广告',
            type:'line',
            stack: '总量',
            areaStyle: {normal: {}},
            data:[150, 232, 201, 154, 190, 330, 410]
        },
        {
            name:'直接访问',
            type:'line',
            stack: '总量',
            areaStyle: {normal: {}},
            data:[320, 332, 301, 334, 390, 330, 320]
        },
        {
            name:'搜索引擎',
            type:'line',
            stack: '总量',
            label: {
                normal: {
                    show: true,
                    position: 'top'
                }
            },
            areaStyle: {normal: {}},
            data:[820, 932, 901, 934, 1290, 1330, 1320]
        }
    ]
};
                   
      // 为echarts对象加载数据
                 myChart.setOption(option);
             }
         );

 

}

 

  </script>

 </HEAD>

 <BODY>
 <div  style="width:800px;height:500px;" id="dataUpdate">
    </div>


    <div id="showarea"><div>


 </BODY>
</HTML>

效果图：

 

 

健康平安的活着
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
echarts 多折现图表动态添加
08-02
echarts 多折线图表，在官网实例的基础上，动态添加新折线。
echarts折现图的配置
Jackson_ji的博客
05-18 2111
Echarts折线图的配置 （1）去掉折线图的边框线及其加入阴影效果 lineStyle: { normal: { type: 'solid', /*color:"#28a5fc",*/ color:"red", opacity :"0.5" } } 如下图所示：  （2）设置移动折线图的 “上下左右” 的位
echarts属性的设置（完整大全）
最新发布
2401_83704309的博客
03-29 844
由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容，详细完整版的JavaScript面试题文档，或更多前端资料可以点此处即可获取！！！。色标识（系列标识的小圆点），存在legend时生效normal: {// color: 各异,},label: {},emphasis: { // 也是选中样式自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
echarts折现图柱状图饼图资料大全整理
心寒的博客
11-14 9462
line（折线图） line: { name: ...,//折现名称 coordinateSystem: 'cartesian2d', // 坐标系 xAxisIndex: 0, yAxisIndex: 0, polarIndex: 0, symbol: 'emptyCircle', // 标记的图形 'circle'|'...
手把手教你用ECharts画折线图
大数据
01-07 6555
导读：折线图是一种基础图表，适合表示数据的变化趋势，常用于时间序列数据的表示。作者：王大伟来源：大数据DT（ID：hzdashuju）在正式学习之前，先来了解一个ECharts官网提供的...
EChart案例-折线面积渐变色
u013025674的博客
09-03 5407
先看效果 图中的范围是个渐变色，option关键配置 itemStyle: { normal: { areaStyle: {type: 'default'}, color: new echarts.graphic.LinearGradient( ...
(代码详解)pyecharts画折线图+多条折线图+参数讲解+美化(有数据)
2301_81199775的博客
12-08 4056
(代码详解)pyecharts画折线图+多条折线图+参数讲解+美化(有数据)+数据平滑
vue+echarts折线图实现丝滑的核心代码
qietuwang的博客
12-11 849
vue+echarts组合在大数据图表，数据可视化这块经常用到，在切图网最近可视化图表项目切图中遇到的，需要实现折线图的线条要求会比较丝滑，中间量两边暗，中间粗两边细，其实通过定义线条的颜色为渐变色，并且设置为x方向横向渐变即可，效果不错，附代码，亲测可用。//barGap: 10, //间距。//barGap: 10, //间距。name:’统计一’,name:’统计二’,
Echerts 绘制折线图
梦幻通灵
09-09 1326
最近想画个折线图，展示业务的走势，选择用的是echarts，这里记录下来，方便查看。 详细介绍可以去官网查看demo哦 -> 官网地址 前端开发语言：vue 先放一张最终的折线效果图，横坐标是日期，纵坐标是金额。 带着问题往下看 1、横纵坐标怎么加？ echarts 折线图接收的参数是数组，注意不能是字符串哦。 xAxis: { type: 'category', name: '日期', // 坐标名字 nameLocation: 'end', // 坐标位置，
Echarts+多折现图 完整demo
06-14
echarts多折现图（折线分类）。有不懂可以问我。看到立马回复
echarts图表柱状图折线图动态轮播tooltip窗
08-12
引入该包，在 myChart.setOption(option)注册表后，调用该方法 tools.loopShowTooltip(myChart, option, { loopSeries: true }) 注：myChart为echarts实例，option为该表配置。配置中必须要有tooltip的配置才可生效
心跳图-echarts.zip
04-20
echarts 实现的心跳图表
基于Duilib实现的折现图表控件
03-12
基于duilib实现的折线图表控件，实现效果：可以多条折线， 鼠标一上去有十字交叉线， 移动鼠标， 十字交叉线跟随移动， 并有tip信息， tip信息实时更新。
echarts 折线图
weixin_43856422的博客
12-12 1506
先上图片 自我认为难点 1.折线的不同颜色 color:["#4ff1ff","#91c720","#fa1e7d","#face1f"], //折线颜色 通过将折线图的颜色放到全局引用 2.折线变平滑 symbol:‘none’, //这句就是去掉点的 smooth:true, //这句就是让曲线变平滑的 3.轴刻度下移动 offset:20,//轴显示值对于轴的距离 4.刻度线，网格线，...
echarts折线图
weixin_44706621的博客
04-13 208
记录echarts折现图配置 我们先来看看效果图 下面我们来看一下vue代码 1，先来看看HTML中怎么写的 <template> <view class="content"> <view @click="echarts.onClick" :prop="option" id="linechartFour" :change:prop="echarts.updateEcharts" class="echarts" ></view> </view&
解决 pyecharts 折线图数字标签设置 formatter 参数后标签内容有问题
weixin_40307444的博客
01-26 6586
解决问题 pyecharts 做折线图的时候，当我们对每个点的数值标签进行设置后，他自动带上了x轴的信息。 问题呈现：pyecharts 折线图 下面代码由于对标签进行了的格式化设置，导致出来的图中把x轴坐标内容也带上了。 from pyecharts.charts import Line c = (Line() .add_xaxis(['a','b','c']) .add_yaxis('',[1,2,3]) .set_series_opts(label_opts=opts.
echarts 图例 && 折线图
weixin_40030173的博客
11-22 6510
【代码】echarts 图例 && 折线图。
Echarts折线图 formatter自定义数值（保留小数点位数、或加上百分号）
qq_40197943的博客
07-07 3681
Echarts折线图 formatter自定义数值（保留小数点位数、或加上百分号）
Echart常用折线图
热门推荐
m0_51431448的博客
05-24 1万+
1. 渐变色折线图 <template> <div :id="id" style="width: 100%; height: 100%"></div> </template> <script> import { fontChart } from "@/utils/echartPxToRem"; import * as echarts from "echarts"; export default { data() { ret.
echarts的折现面积图不要斜线
06-01
要取消 ECharts 折线面积图中的斜线，可以设置 `areaStyle` 属性的 `opacity` 为 0，如下所示： ```javascript option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值