HTML页面 三步引用Echarts
简单引用Echarts
- 一、下载echart.js
- 二、创建HTML页面
- 三、引用echarts图
一、下载echart.js
echarts官网下载
二、创建HTML页面
创建html页面，并且引用上面加载的echarts.js
DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Documenttitle><script src="echarts.min.js">script>
head>
<body>body>
html>
三、引用echarts图
1、首先去echarts示例选择想要使用的图表
2、跳转到该图表详情页面，点击完整代码Tab
3、在HTML页面创建一个div
指定 id = ”main" 或者改成其他的
但是下面引用的时候需要更改
var chartDom = document.getElementById(‘main’);
这里的main改成你div的id即可
DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Documenttitle><script src="echarts.min.js">script>
head>
<body><div id="main" style="height: 500px; width: 1000px;">div>
body>
html>
4、复制第二步里完整代码第一行之外的所有代码
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;option = {backgroundColor: '#2c343c',title: {text: 'Customized Pie',left: 'center',top: 20,textStyle: {color: '#ccc'}},tooltip: {trigger: 'item'},visualMap: {show: false,min: 80,max: 600,inRange: {colorLightness: [0, 1]}},series: [{name: '访问来源',type: 'pie',radius: '55%',center: ['50%', '50%'],data: [{value: 335, name: '直接访问'},{value: 310, name: '邮件营销'},{value: 274, name: '联盟广告'},{value: 235, name: '视频广告'},{value: 400, name: '搜索引擎'}].sort(function (a, b) { return a.value - b.value; }),roseType: 'radius',label: {color: 'rgba(255, 255, 255, 0.3)'},labelLine: {lineStyle: {color: 'rgba(255, 255, 255, 0.3)'},smooth: 0.2,length: 10,length2: 20},itemStyle: {color: '#c23531',shadowBlur: 200,shadowColor: 'rgba(0, 0, 0, 0.5)'},animationType: 'scale',animationEasing: 'elasticOut',animationDelay: function (idx) {return Math.random() * 200;}}]
};option && myChart.setOption(option);5、在刚才的HTML页面添加script 内容是上一步复制的内容，到此结束
最后的代码如下
DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Documenttitle><script src="echarts.min.js">script>
head>
<body><div id="main" style="height: 500px; width: 1000px;">div><script>var chartDom = document.getElementById('main');var myChart = echarts.init(chartDom);var option;option = {backgroundColor: '#2c343c',title: {text: 'Customized Pie',left: 'center',top: 20,textStyle: {color: '#ccc'}},tooltip: {trigger: 'item'},visualMap: {show: false,min: 80,max: 600,inRange: {colorLightness: [0, 1]}},series: [{name: '访问来源',type: 'pie',radius: '55%',center: ['50%', '50%'],data: [{value: 335, name: '直接访问'},{value: 310, name: '邮件营销'},{value: 274, name: '联盟广告'},{value: 235, name: '视频广告'},{value: 400, name: '搜索引擎'}].sort(function (a, b) { return a.value - b.value; }),roseType: 'radius',label: {color: 'rgba(255, 255, 255, 0.3)'},labelLine: {lineStyle: {color: 'rgba(255, 255, 255, 0.3)'},smooth: 0.2,length: 10,length2: 20},itemStyle: {color: '#c23531',shadowBlur: 200,shadowColor: 'rgba(0, 0, 0, 0.5)'},animationType: 'scale',animationEasing: 'elasticOut',animationDelay: function (idx) {return Math.random() * 200;}}]};option && myChart.setOption(option);script>
body>
html>
6、页面效果如下
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！