123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730 |
- // 柱状图1模块
- (function () {
- // 实例化对象
- var myChart = echarts.init(document.querySelector(".bar .chart"));
- // 指定配置和数据
- var option = {
- color: ["#2f89cf"],
- tooltip: {
- trigger: "axis",
- axisPointer: {
- // 坐标轴指示器,坐标轴触发有效
- type: "shadow" // 默认为直线,可选为:'line' | 'shadow'
- }
- },
- grid: {
- left: "0%",
- top: "10px",
- right: "0%",
- bottom: "4%",
- containLabel: true
- },
- xAxis: [
- {
- type: "category",
- data: [
- "旅游行业",
- "教育培训",
- "游戏行业",
- "医疗行业",
- "电商行业",
- "社交行业",
- "金融行业"
- ],
- axisTick: {
- alignWithLabel: true
- },
- axisLabel: {
- textStyle: {
- color: "rgba(255,255,255,.6)",
- fontSize: "12"
- }
- },
- axisLine: {
- show: false
- }
- }
- ],
- yAxis: [
- {
- type: "value",
- axisLabel: {
- textStyle: {
- color: "rgba(255,255,255,.6)",
- fontSize: "12"
- }
- },
- axisLine: {
- lineStyle: {
- color: "rgba(255,255,255,.1)"
- // width: 1,
- // type: "solid"
- }
- },
- splitLine: {
- lineStyle: {
- color: "rgba(255,255,255,.1)"
- }
- }
- }
- ],
- series: [
- {
- name: "直接访问",
- type: "bar",
- barWidth: "35%",
- data: [200, 300, 300, 900, 1500, 1200, 600],
- itemStyle: {
- barBorderRadius: 5
- }
- }
- ]
- };
- // 把配置给实例对象
- myChart.setOption(option);
- window.addEventListener("resize", function () {
- myChart.resize();
- });
- // 数据变化
- var dataAll = [
- { year: "2019", data: [200, 300, 300, 900, 1500, 1200, 600] },
- { year: "2020", data: [300, 400, 350, 800, 1800, 1400, 700] }
- ];
- document.querySelector(".bar h2").addEventListener("click", function (e) {
- var i = e.target == this.children[0] ? 0 : 1;
- option.series[0].data = dataAll[i].data;
- myChart.setOption(option);
- });
- })();
- // 折线图定制
- (function () {
- // 基于准备好的dom,初始化echarts实例
- var myChart = echarts.init(document.querySelector(".line .chart"));
- // (1)准备数据
- var data = {
- year: [
- [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
- [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
- ]
- };
- // 2. 指定配置和数据
- var option = {
- color: ["#00f2f1", "#ed3f35"],
- tooltip: {
- // 通过坐标轴来触发
- trigger: "axis"
- },
- legend: {
- // 距离容器10%
- right: "10%",
- // 修饰图例文字的颜色
- textStyle: {
- color: "#4c9bfd"
- }
- // 如果series 里面设置了name,此时图例组件的data可以省略
- // data: ["邮件营销", "联盟广告"]
- },
- grid: {
- top: "20%",
- left: "3%",
- right: "4%",
- bottom: "3%",
- show: true,
- borderColor: "#012f4a",
- containLabel: true
- },
- xAxis: {
- type: "category",
- boundaryGap: false,
- data: [
- "1月",
- "2月",
- "3月",
- "4月",
- "5月",
- "6月",
- "7月",
- "8月",
- "9月",
- "10月",
- "11月",
- "12月"
- ],
- // 去除刻度
- axisTick: {
- show: false
- },
- // 修饰刻度标签的颜色
- axisLabel: {
- color: "rgba(255,255,255,.7)"
- },
- // 去除x坐标轴的颜色
- axisLine: {
- show: false
- }
- },
- yAxis: {
- type: "value",
- // 去除刻度
- axisTick: {
- show: false
- },
- // 修饰刻度标签的颜色
- axisLabel: {
- color: "rgba(255,255,255,.7)"
- },
- // 修改y轴分割线的颜色
- splitLine: {
- lineStyle: {
- color: "#012f4a"
- }
- }
- },
- series: [
- {
- name: "新增项目",
- type: "line",
- stack: "总量",
- // 是否让线条圆滑显示
- smooth: true,
- data: data.year[0]
- },
- {
- name: "新增技能",
- type: "line",
- stack: "总量",
- smooth: true,
- data: data.year[1]
- }
- ]
- };
- // 3. 把配置和数据给实例对象
- myChart.setOption(option);
- // 重新把配置好的新数据给实例对象
- myChart.setOption(option);
- window.addEventListener("resize", function () {
- myChart.resize();
- });
- })();
- // 饼形图定制
- // 折线图定制
- (function () {
- // 基于准备好的dom,初始化echarts实例
- var myChart = echarts.init(document.querySelector(".pie .chart"));
- option = {
- tooltip: {
- trigger: "item",
- formatter: "{a} <br/>{b}: {c} ({d}%)",
- position: function (p) {
- //其中p为当前鼠标的位置
- return [p[0] + 10, p[1] - 10];
- }
- },
- legend: {
- top: "90%",
- itemWidth: 10,
- itemHeight: 10,
- data: ["0岁以下", "20-29岁", "30-39岁", "40-49岁", "50岁以上"],
- textStyle: {
- color: "rgba(255,255,255,.5)",
- fontSize: "12"
- }
- },
- series: [
- {
- name: "年龄分布",
- type: "pie",
- center: ["50%", "42%"],
- radius: ["40%", "60%"],
- color: [
- "#065aab",
- "#066eab",
- "#0682ab",
- "#0696ab",
- "#06a0ab",
- "#06b4ab",
- "#06c8ab",
- "#06dcab",
- "#06f0ab"
- ],
- label: { show: false },
- labelLine: { show: false },
- data: [
- { value: 1, name: "0岁以下" },
- { value: 4, name: "20-29岁" },
- { value: 2, name: "30-39岁" },
- { value: 2, name: "40-49岁" },
- { value: 1, name: "50岁以上" }
- ]
- }
- ]
- };
- // 使用刚指定的配置项和数据显示图表。
- myChart.setOption(option);
- window.addEventListener("resize", function () {
- myChart.resize();
- });
- })();
- // 学习进度柱状图模块
- (function () {
- // 基于准备好的dom,初始化echarts实例
- var myChart = echarts.init(document.querySelector(".bar1 .chart"));
- var data = [90, 80, 75, 65, 65];
- var titlename = ["javascript", "VUE", "jQuery", "HTML5", "CSS3"];
- var valdata = ["精通", "熟练", "熟练", "掌握", "掌握"];
- var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
- option = {
- //图标位置
- grid: {
- top: "10%",
- left: "22%",
- bottom: "10%"
- },
- xAxis: {
- show: false
- },
- yAxis: [
- {
- show: true,
- data: titlename,
- inverse: true,
- axisLine: {
- show: false
- },
- splitLine: {
- show: false
- },
- axisTick: {
- show: false
- },
- axisLabel: {
- color: "#fff",
- rich: {
- lg: {
- backgroundColor: "#339911",
- color: "#fff",
- borderRadius: 15,
- // padding: 5,
- align: "center",
- width: 15,
- height: 15
- }
- }
- }
- },
- {
- show: true,
- inverse: true,
- data: valdata,
- axisLabel: {
- textStyle: {
- fontSize: 12,
- color: "#fff"
- }
- }
- }
- ],
- series: [
- {
- name: "条",
- type: "bar",
- yAxisIndex: 0,
- data: data,
- barCategoryGap: 50,
- barWidth: 10,
- itemStyle: {
- normal: {
- barBorderRadius: 20,
- color: function (params) {
- var num = myColor.length;
- return myColor[params.dataIndex % num];
- }
- }
- },
- label: {
- normal: {
- show: true,
- position: "inside",
- formatter: "{c}%"
- }
- }
- },
- {
- name: "框",
- type: "bar",
- yAxisIndex: 1,
- barCategoryGap: 50,
- data: [100, 100, 100, 100, 100],
- barWidth: 15,
- itemStyle: {
- normal: {
- color: "none",
- borderColor: "#00c1de",
- borderWidth: 3,
- barBorderRadius: 15
- }
- }
- }
- ]
- };
- // 使用刚指定的配置项和数据显示图表。
- myChart.setOption(option);
- window.addEventListener("resize", function () {
- myChart.resize();
- });
- })();
- // 折线图 优秀作品
- (function () {
- // 基于准备好的dom,初始化echarts实例
- var myChart = echarts.init(document.querySelector(".line1 .chart"));
- option = {
- tooltip: {
- trigger: "axis",
- axisPointer: {
- lineStyle: {
- color: "#dddc6b"
- }
- }
- },
- legend: {
- top: "0%",
- textStyle: {
- color: "rgba(255,255,255,.5)",
- fontSize: "12"
- }
- },
- grid: {
- left: "10",
- top: "30",
- right: "10",
- bottom: "10",
- containLabel: true
- },
- xAxis: [
- {
- type: "category",
- boundaryGap: false,
- axisLabel: {
- textStyle: {
- color: "rgba(255,255,255,.6)",
- fontSize: 12
- }
- },
- axisLine: {
- lineStyle: {
- color: "rgba(255,255,255,.2)"
- }
- },
- data: [
- "01",
- "02",
- "03",
- "04",
- "05",
- "06",
- "07",
- "08",
- "09",
- "11",
- "12",
- "13",
- "14",
- "15",
- "16",
- "17",
- "18",
- "19",
- "20",
- "21",
- "22",
- "23",
- "24",
- "25",
- "26",
- "27",
- "28",
- "29",
- "30"
- ]
- },
- {
- axisPointer: { show: false },
- axisLine: { show: false },
- position: "bottom",
- offset: 20
- }
- ],
- yAxis: [
- {
- type: "value",
- axisTick: { show: false },
- axisLine: {
- lineStyle: {
- color: "rgba(255,255,255,.1)"
- }
- },
- axisLabel: {
- textStyle: {
- color: "rgba(255,255,255,.6)",
- fontSize: 12
- }
- },
- splitLine: {
- lineStyle: {
- color: "rgba(255,255,255,.1)"
- }
- }
- }
- ],
- series: [
- {
- name: "流入",
- type: "line",
- smooth: true,
- symbol: "circle",
- symbolSize: 5,
- showSymbol: false,
- lineStyle: {
- normal: {
- color: "#0184d5",
- width: 2
- }
- },
- areaStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(
- 0,
- 0,
- 0,
- 1,
- [
- {
- offset: 0,
- color: "rgba(1, 132, 213, 0.4)"
- },
- {
- offset: 0.8,
- color: "rgba(1, 132, 213, 0.1)"
- }
- ],
- false
- ),
- shadowColor: "rgba(0, 0, 0, 0.1)"
- }
- },
- itemStyle: {
- normal: {
- color: "#0184d5",
- borderColor: "rgba(221, 220, 107, .1)",
- borderWidth: 12
- }
- },
- data: [
- 30,
- 40,
- 30,
- 40,
- 30,
- 40,
- 30,
- 60,
- 20,
- 40,
- 20,
- 40,
- 30,
- 40,
- 30,
- 40,
- 30,
- 40,
- 30,
- 60,
- 20,
- 40,
- 20,
- 40,
- 30,
- 60,
- 20,
- 40,
- 20,
- 40
- ]
- },
- {
- name: "流出",
- type: "line",
- smooth: true,
- symbol: "circle",
- symbolSize: 5,
- showSymbol: false,
- lineStyle: {
- normal: {
- color: "#00d887",
- width: 2
- }
- },
- areaStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(
- 0,
- 0,
- 0,
- 1,
- [
- {
- offset: 0,
- color: "rgba(0, 216, 135, 0.4)"
- },
- {
- offset: 0.8,
- color: "rgba(0, 216, 135, 0.1)"
- }
- ],
- false
- ),
- shadowColor: "rgba(0, 0, 0, 0.1)"
- }
- },
- itemStyle: {
- normal: {
- color: "#00d887",
- borderColor: "rgba(221, 220, 107, .1)",
- borderWidth: 12
- }
- },
- data: [
- 50,
- 30,
- 50,
- 60,
- 10,
- 50,
- 30,
- 50,
- 60,
- 40,
- 60,
- 40,
- 80,
- 30,
- 50,
- 60,
- 10,
- 50,
- 30,
- 70,
- 20,
- 50,
- 10,
- 40,
- 50,
- 30,
- 70,
- 20,
- 50,
- 10,
- 40
- ]
- }
- ]
- };
- // 使用刚指定的配置项和数据显示图表。
- myChart.setOption(option);
- window.addEventListener("resize", function () {
- myChart.resize();
- });
- })();
- // 点位分布统计模块
- (function () {
- // 1. 实例化对象
- var myChart = echarts.init(document.querySelector(".pie1 .chart"));
- // 2. 指定配置项和数据
- var option = {
- legend: {
- top: "90%",
- itemWidth: 10,
- itemHeight: 10,
- textStyle: {
- color: "rgba(255,255,255,.5)",
- fontSize: "12"
- }
- },
- tooltip: {
- trigger: "item",
- formatter: "{a} <br/>{b} : {c} ({d}%)"
- },
- // 注意颜色写的位置
- color: [
- "#006cff",
- "#60cda0",
- "#ed8884",
- "#ff9f7f",
- "#0096ff",
- "#9fe6b8",
- "#32c5e9",
- "#1d9dff"
- ],
- series: [
- {
- name: "点位统计",
- type: "pie",
- // 如果radius是百分比则必须加引号
- radius: ["10%", "70%"],
- center: ["50%", "42%"],
- roseType: "radius",
- data: [
- { value: 20, name: "西安" },
- { value: 26, name: "北京" },
- { value: 24, name: "上海" },
- { value: 25, name: "其他" },
- { value: 20, name: "武汉" },
- { value: 25, name: "杭州" },
- { value: 30, name: "深圳" },
- { value: 42, name: "广州" }
- ],
- // 修饰饼形图文字相关的样式 label对象
- label: {
- fontSize: 10
- },
- // 修饰引导线样式
- labelLine: {
- // 连接到图形的线长度
- length: 10,
- // 连接到文字的线长度
- length2: 10
- }
- }
- ]
- };
- // 3. 配置项和数据给我们的实例化对象
- myChart.setOption(option);
- // 4. 当我们浏览器缩放的时候,图表也等比例缩放
- window.addEventListener("resize", function () {
- // 让我们的图表调用 resize这个方法
- myChart.resize();
- });
- })();
|