Echarts,Highcharts,canvas

Echarts,Highcharts,canvas

Echarts

 头部<!-- 引入 echarts.js -->
    <script src="./js/echarts.min.js"></script>   

 bddy中 <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>

    <script type="text/javascript">
        // 基于准备好的dom,初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
   
            title: {
   
                text: 'ECharts 入门示例',
                link:"http://www.baidu.com",
                target:"blank",
                subtext:"今日访问量",
                sublink:"http://www.baidu.com",
                textAlign:'normal',
               backgroundColor:"red"
                
            },
          
            tooltip: {
   },
            legend: {
   
                data:['销量'],
            
            },
            xAxis: {
   
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
             
            },
            yAxis: {
   },
            series: [{
   
                name: '销量',
                type: 'pie',
                data: [5, 20, 36, 10, 10, 20]
               
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>

//通过修改option中的项,改变图片的样式

highCharts

头部引入 <script src="./js/highcharts.js"></script>
body中  <div id="container" style="min-width:400px;height:400px"></div>

    <script>
      var chart = Highcharts.chart('container', {
   
	chart: {
   
		type: 'bar'
    },
    credits:{
   
     enabled: false // 禁用版权信息
},
	title: {
   
		text: '各洲不同时间的人口条形图'
	},
	subtitle: {
   
		text: '数据来源: Wikipedia.org'
	},
	xAxis: {
   
		categories: ['非洲', '美洲', '亚洲', '欧洲', '大洋洲'],
		title: {
   
			text: null
		}
	},
	yAxis: {
   
		min: 0,
		title: {
   
			text: '人口总量 (百万)',
			align: 'high'
		},
		labels: {
   
			overflow: 'justify'
		}
	},
	tooltip: {
   
		valueSuffix: ' 百万'
	},
	plotOptions: {
   
		bar: {
   
			dataLabels: {
   
				enabled: true,
				allowOverlap: true // 允许数据标签重叠
			}
		}
	},
	legend: {
   
		layout: 'vertical',
		align: 'right',
		verticalAlign: 'top',
		x: -40,
		y: 100,
		floating: true,
		borderWidth: 1,
		backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
		shadow: true
	},
	series: [{
   
		name: '1800 年',
		data: [107, 31, 635, 203, 2]
	}, {
   
		name: '1900 年',
		data: [133, 156, 947, 408, 6]
	}, {
   
		name: '2008 年',
		data: [973, 914, 4054, 732, 34]
	}]
});

        </script>

canvas

  1. let canvas = document.getElementById(“canvas”).getContext(“2d”)
  2. fillStyle填充色
  3. strokeStyle 笔触色
  4. fliiRect(x,y,w,h) 填充矩形
  5. strokeRect()笔触矩形
  6. Rect()路径矩形
  7. moveTo(x,y)//起始点,仅使用一次
  8. lineTo(x,y)//连接点,可以使用多次
  9. lineWidth 线宽
  10. beginPAth()开启一条路径或重置一条路径
  11. closePath() 结束路径
  12. stroke() 把笔触的内容返回到页面
  13. fill()把填充的内容返回到页面
  14. arc (x,y,半径,起始弧度,结束弧度,是否反向画圆)
  15. font = ‘italic bold 40px arial’
  16. strokeText(文字内容,x,y) 笔触文字
  17. fillText() 填充文字
  18. cas.shadowOffsetX = 2; 阴影的x轴偏移量
  19. shadowOffsetY = 20; 阴影的y轴偏移量
  20. shadowColor = ‘yellow’; 阴影颜色
  21. shadowBlur = 20; 阴影的模糊程度
  22. globalAlpha = 0.5; 透明度
全部评论

相关推荐

06-10 23:36
已编辑
首都经济贸易大学 C++
点赞 评论 收藏
分享
06-13 17:33
门头沟学院 Java
顺序不记了,大致顺序是这样的,有的相同知识点写分开了1.基本数据类型2.基本数据类型和包装类型的区别3.==和equals区别4.ArrayList与LinkedList区别5.hashmap底层原理,put操作时会发生什么6.说出几种树型数据结构7.B树和B+树区别8.jvm加载类机制9.线程池核心参数10.创建线程池的几种方式11.callable与runnable区别12.线程池怎么回收线程13.redis三剑客14.布隆过滤器原理,不要背八股,说说真正使用时遇到了问题没有(我说没有,不知道该怎么回答了)15.堆的内存结构16.自己在写项目时有没有遇见过oom,如何处理,不要背八股,根据真实经验,我说不会17.redis死锁怎么办,watchdog机制如何发现是否锁过期18.如何避免redis红锁19.一个表性别与年龄如何加索引20.自己的项目的QPS怎么测的,有没有真正遇到大数量表21.说一说泛型22.springboot自动装配原理23.springmvc与springboot区别24.aop使用过嘛?动态代理与静态代理区别25.spring循环依赖怎么解决26.你说用过es,es如何分片,怎么存的数据,1000万条数据怎么写入库中27.你说用limit,那么在数据量大之后,如何优化28.rabbitmq如何批次发送,批量读取,答了延迟队列和线程池,都不对29.计网知不知道smtp协议,不知道写了对不对,完全听懵了30.springcloud知道嘛?只是了解反问1.做什么的?短信服务,信息量能到千万级2.对我的建议,基础不错,但是不要只背八股,多去实际开发中理解。面试官人不错,虽然没露脸,但是中间会引导我回答问题,不会的也只是说对我要求没那么高。面完问我在济宁生活有没有困难,最快什么时候到,让人事给我聊薪资了。下午人事打电话,问我27届的会不会跑路,还在想办法如何使我不跑路,不想扣我薪资等。之后我再联系吧,还挺想去的😭,我真不跑路哥😢附一张河科大幽默大专图,科大就是大专罢了
查看30道真题和解析
点赞 评论 收藏
分享
评论
1
收藏
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务