欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Echarts,Highcharts,canvas

程序员文章站 2022-03-10 16:20:55
...

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; 透明度
相关标签: 数据可视化