【ECharts学习】—实现我的第一个图表

<!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>Document</title><script src="js/jquery-3.4.1.min.js"></script><script src="js/echarts.min.js"></script>
</head><body><!-- 容器 必须要给宽度和高度 --><div id="main" style="width:600px; height:400px;border:1px solid #999"></div><script>// 创建容器对容器进行初始化 echarts.init()var myChart = echarts.init(document.getElementById('main'));//指定图表的配置项和数据var option = {title: { //标题组件 包含主标题和副标题// id: '', //标识show: true, //是否显示标题组件text: 'ECharts 入门示例', //主标题文本支持\n换行link: 'https://www.baidu.com', //主标题文本超链接target: 'blank', //指定窗口打开主标题超链接textStyle: { //主标题的样式color: 'green', //主标题文字的颜色fontStyle: 'italic', //主标题文字字体的风格fontWeight: 'bold', //主标题文字字体的粗细},subtext: 'ECharts入门学习', //副标题文本，支持使用 \n 换行sublink: '', //副标题文本超链接subtextStyle: {color: 'yellowgreen', //副标题文字的颜色//……},},left: 'right', // title 组件离容器左侧的距离padding: 5, //标题内边距 单位pxitemGap: 10, //主标题之间的距离//backgroundColor:'pink',//标题背景颜色 默认透明tooltip: { //提示框组件 鼠标悬浮到图形上面 出现的弹框show: true, //是否显示提示框组件trigger: 'axis', //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用//折线（区域）图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）// format: '{a}-{b}-{c}', //提示框浮层内容格式器 支持字符模板和回调函数(百度地图)两种格式},legend: { //图例组件展现了不同系列的标记(symbol)，颜色和名字itemWidth: 40, //图例标记的图形宽度itemHeight: 22, //图例标记的图形高度textStyle: {color: 'blue', // 文字的颜色},selectedMode: false, //图例选择的模式，控制是否可以通过点击图例改变系列的显示状态。默认开启图例选择，可以设成 false 关闭icon: 'rect', //图例项的icon//可以通过 'image://url' 设置为图片，其中 URL 为图片的链接// icon: 'image://img/dog.jpg', top: '20', //位置data: ['销量']},xAxis: { //直角坐标系 grid 中的 x 轴axisLine: { //坐标轴线的相关设置show: true, //是否显示坐标轴轴线lineStyle: { //坐标轴线的颜色  修改X轴线的时候  标记同步修改color: 'blue',}},axisTick: { //坐标轴的刻度相关设置show: true, // 是否显示刻度alignWidthLabel: true, //刻度和字对齐},axisLabel: { //坐标轴和标签的设置color: 'red',},data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]},yAxis: { //直角坐标系 grid 中的 y 轴axisLine: { //坐标轴线的相关设置show: true, //是否显示坐标轴轴线lineStyle: { //坐标轴线的颜色  修改y轴线的时候  标记同步修改color: 'blue',}}},// 坐标在grid区域中的分隔线splitLine: {//show: false,是否显示分隔线lineStyle: {//  color: '#999', // 分隔线的颜色 可以设置成单个颜色//使用深浅的间隔色color: ['#aaa', '#ddd']}},series: [{ //系列列表 type系列类型name: '销量', //系列名称——悬浮——弹框出现type: 'bar', //图标系列类型柱状图或条形图 line折线图label: {normal: {show: true,color: '#000',fontSize: 14,position: 'outside',formatter: '{c}'}},itemStyle: { //图形的颜色//  color: 'orange', //柱状条的颜色color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: 'red' // 0% 处的颜色}, {offset: 1,color: 'blue' // 100% 处的颜色}],global: false // 缺省为 false},//  barBorderRadius: 20, //圆角//  borderColor: 'green', //柱状条描边的颜色//  borderWidth: 1,},//    showBackground: true, //显示背景颜色//    backgroundStyle: { //柱条的背景颜色//        color: 'rgba(180,180,180,.2)'//    },//高亮的图形样式和标签样式emphasis: { //悬浮到柱状条 显示的高亮状态lable: {fontSize: 18},itemStyle: {color: 'orange'}},//柱条的宽度 不设自适应barWidth: 40,data: [5, 20, 36, 10, 10, 20]}]};//把配置项呈现在图标上myChart.setOption(option);</script>
</body></html>

【ECharts学习】—实现我的第一个图表相关推荐

echarts学习笔记1
可视化面板介绍应对现在数据可视化的趋势,越来越多企业需要在很多场景(营销数据,生产数据,用户数据)下使用,可视化图表来展示体现数据,让数据更加直观,数据特点更加突出. [外链图片转存失败,源站可 ...
echarts学习1----格式整理以及地图入门
首先,Echarts是结合html/ javascript一起运用的,可以在线也可以离线使用. 下面是一个.html文件的代码及解析: <!DOCTYPE html> <head&g ...
在一个html加载多个echarts,Echarts一个页面加载多个图表及图表自适应
Echarts一个页面加载多个图表及图表自适应模块化加载 //入口 require.config({ paths: { echarts: 'http://echarts.baidu.com/buil ...
编程基础---echarts学习
官网 1.5 分钟上手 ECharts 获取 ECharts 你可以通过以下几种方式获取 ECharts. 从官网下载界面选择你需要的版本下载,根据开发者功能和体积上的需求,我们提供了不同打包的下载, ...
学习进度条（第一周）
学习进度条: 第一周所花时间(包括上课) 5h 代码量(行) 150 博客量(篇) 2 了解到的知识点这种主要是对上学期web知识的一个回顾,进行了第一次开学测验,了解了实发项目的开环情况. ...
斯坦福大学深度学习与自然语言处理第一讲：引言
斯坦福大学在三月份开设了一门"深度学习与自然语言处理"的课程:CS224d: Deep Learning for Natural Language Processing,授课老师是 ...
Vue 学习第四天--第一部分 --盲点整理与昨天知识回顾
Vue 学习第四天--第一部分 1.父组件向子组件传值 v-bind:临时变量名="父组件变量名" v-bind:value="fathervalue" 子 ...
Echarts学习记录——如何去掉网格线及网格区域颜色
关键属性 splitLine和splitArea,可以设置相关的属性示例代码 <!DOCTYPE html> <html lang="en"> <h ...
斯坦福大学深度学习与自然语言处理第一讲引言
http://www.52nlp.cn/%E6%96%AF%E5%9D%A6%E7%A6%8F%E5%A4%A7%E5%AD%A6%E6%B7%B1%E5%BA%A6%E5%AD%A6%E4%B9%A ...

【ECharts学习】—实现我的第一个图表

【ECharts学习】—实现我的第一个图表

【ECharts学习】—实现我的第一个图表相关推荐

最新文章

热门文章