目录
Echarts--商业级数据图表
Echarts支持的图表
Echarts的使用方法
Echarts--商业级数据图表
商业级数据图表，它是一个纯JavaScript的图标库，兼容绝大部分的浏览器，底层依赖轻量级的canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。Apache ECharts
Echarts支持的图表
折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）
雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表
Echarts的使用方法
一、首先在vue中下载echarts 命令：npm install echarts --save
二、在所在页面进行引用
代码块部分
<template><divclass="contetn"><divid="main"ref="chart"style="width:100%;height:400px"></div></div></template><script>import*asechartsfrom"echarts"; //引用echartsexportdefault{data(){return{myChart:"",};},mounted(){this.init();varself=this;window.onresize=self.myChart.resize;window.addEventListener("resize",function(){self.myChart.resize();});},methods:{init(){this.myChart=echarts.init(this.$refs.chart);varoption={title:{//text:"堆叠区域图",},tooltip:{trigger:"axis",axisPointer:{type:"cross",label:{backgroundColor:"#6a7985",},},},legend:{data:["邮件营销","联盟广告","视频广告","直接访问","搜索引擎"],},grid:{left:"3%",right:"4%",bottom:"3%",containLabel:true,},xAxis:[{type:"category",boundaryGap:false,data:["周一","周二","周三","周四","周五","周六","周日"],},],yAxis:[{type:"value",},],series:[{name:"邮件营销",type:"line",stack:"总量",areaStyle:{},data:[120,132,101,134,90,230,210],},{name:"联盟广告",type:"line",stack:"总量",areaStyle:{},data:[220,182,191,234,290,330,310],},{name:"视频广告",type:"line",stack:"总量",areaStyle:{},data:[150,232,201,154,190,330,410],},{name:"直接访问",type:"line",stack:"总量",areaStyle:{},data:[320,332,301,334,390,330,320],},{name:"搜索引擎",type:"line",stack:"总量",label:{normal:{show:true,position:"top",},},areaStyle:{},data:[820,932,901,934,1290,1330,1320],},],};this.myChart.setOption(option);},},};</script>
效果图
后续（动图）
<template><div class="contetn"><div id="main" ref="chart" style="height: 500px"></div></div></template><script>import * as echarts from "echarts"; //引用echartsexport default {data() {return {myChart: "",};},mounted() {this.init();var self = this;window.onresize = self.myChart.resize;window.addEventListener("resize", function () {self.myChart.resize();});},methods: {init() {this.myChart = echarts.init(this.$refs.chart);var option = {backgroundColor: "#c4e0da",xAxis: {type: "category",boundaryGap: false,data: ["一月份","二月份","三月份","四月份","五月份","六月份","七月份","八月份","九月份","十月份","十一月份","十二月份",],},legend: {data: ["", "", ""],},grid: {left: ".5%",right: "2%",bottom: "5%",containLabel: true,},yAxis: {type: "value",},series: [{data: [100, 350, 400, 140, 710, 450, 200, 70, 20, 170, 10, 510],name: "",type: "bar",smooth: true,},{data: [100, 250, 500, 40, 10, 450, 20, 700, 200, 70, 40, 550],name: "",type: "pie",smooth: true,},{data: [100, 150, 600, 740, 710, 50, 210, 10, 100, 10, 110, 50],name: "",type: "line",smooth: true,},],};var res = [[500, 750, 200, 240, 710, 450, 200, 700, 200, 170, 410, 550],[300, 100, 10, 20, 110, 50, 200, 70, 10, 10, 400, 510],[100, 700, 280, 1240, 710, 1350, 1100, 1700, 400, 170, 140, 550],[750, 1050, 5050, 4500, 500, 1500, 350, 250, 4000, 4100, 4050, 150],[500, 800, 5500, 4050, 5050, 1050, 3500, 250, 400, 4100, 450, 1050],[50, 150, 50, 450, 500, 500, 50, 20, 400, 100, 50, 150],];this.myChart.setOption(option);setInterval(() => {var i = parseInt(Math.random() * res.length);console.log(i);option.series[0].data = res[i];option.series[1].data = res[i + 1];option.series[2].data = res[i + 2];this.myChart.setOption(option);}, 800);},},};</script>
