iis6无法新建网站,品牌营销策划过程,ppt免费模板官网,如何优化网站推广很多时候web开发也会需要用到统计图#xff0c;如果单纯靠我们自己那点拙劣的css和js水平设计的话#xff0c;又耗时间又做得跟史一样#xff0c;这时候就需要引入别人设计师为我们设计好的动态统计图——echarts Echarts的官网是#xff1a;Apache ECharts
1、第一步如果单纯靠我们自己那点拙劣的css和js水平设计的话又耗时间又做得跟史一样这时候就需要引入别人设计师为我们设计好的动态统计图——echarts Echarts的官网是Apache ECharts
1、第一步引入echarts
跟引入bootstrap、Vue这些一样你可以选择引入本地的js文件或者用在线的CDN
本地的文件在本文顶部开头中自己下载。如果找不到我的资源可以下载这个链接https://registry.npmjs.org/echarts/-/echarts-5.5.0.tgz解压后找到【dist】文件夹找到【echarts.js】文件把它解压到你要用它的同级目录下然后引入本地js文件到html中
!-- 引入刚刚下载的 ECharts 文件 --
script srcecharts.js/script
或者不要那么麻烦直接用在线CDN我更偏向这种把这段代码写到你的html文件里
script srchttps://cdn.jsdelivr.net/npm/echarts5.4.0/dist/echarts.min.js/script 2、第二步为echarts统计图表设置一个固定宽度和高度的容器
例如
!-- css部分 --
style
.echarts-box {width: 600px;height: 400px;padding: 30px;margin: 0 auto;border: 1px solid #ccc;}
/style!-- HTML部分 --
body!-- 为 ECharts 准备一个定义了宽高的 DOM --div classecharts-box idmain/div
/body 3、然后直接开始CV大法乱用爽用
点开【示例】会看到各种花里胡哨的图直接选择自己喜欢的点击样例代码都给你了直接开始cv 但是它代码提供的只是这个样例的代码并没有提供我们怎么去创建它并开启它的代码要我们手动开启也很简单
1、echarts.init( )函数是开始创建这个样例的容器你上面HTML已经写了一个容器了那么现在echarts需要知道那个容器是用来存放、展示echarts图表的你只需要用JavaScript绑定这个DOM元素然后传参给echarts.init( )函数就行了
let myChart echarts.init(document.getElementById(main));
2、通过【echars容器变量.setOption( )】函数显示图表
.setOption()函数需要往里传入配置数据参数这个【配置数据参数】就是你刚刚网页上copy的那一堆代码你可以直接copy到.setOption()里也可以用一个变量等于你刚刚那一堆配置数据然后再把变量放进.setOption()里
// 指定图表的配置项和数据
//这个案例是柱状图
let option {title: {text: ECharts柱状图示例},tooltip: {},legend: {data: [销量]},xAxis: {data: [衬衫, 羊毛衫, 雪纺衫, 裤子, 高跟鞋, 袜子]},yAxis: {},series: [{name: 销量,type: bar,data: [5, 20, 36, 10, 10, 20]}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
下面代码是两个完整的例子
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.echarts-box {width: 600px;height: 400px;padding: 30px;margin: 0 auto;border: 1px solid #ccc;}/style
/head
bodydiv classecharts-box idmain/divdiv classecharts-box No2 idmain/divscript srchttps://cdn.jsdelivr.net/npm/echarts5.4.0/dist/echarts.min.js/scriptscript typetext/javascript// 基于准备好的dom初始化echarts实例let myChart echarts.init(document.getElementById(main));// 指定图表的配置项和数据//这个案例是柱状图let option {title: {text: ECharts柱状图示例},tooltip: {},legend: {data: [销量]},xAxis: {data: [衬衫, 羊毛衫, 雪纺衫, 裤子, 高跟鞋, 袜子]},yAxis: {},series: [{name: 销量,type: bar,data: [5, 20, 36, 10, 10, 20]}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);//这个案例是圆饼图let myChart2 echarts.init(document.querySelector(.No2))let option2 {title: {text: 岑梓铭的圆饼图,subtext: 靓不靓啊,left: center},tooltip: {trigger: item},legend: {orient: vertical,left: left},series: [{name: Access From,type: pie,radius: 50%,data: [{ value: 1048, name: 吃饭 },{ value: 735, name: 睡觉 },{ value: 580, name: 玩手机 },{ value: 484, name: 学习 },{ value: 300, name: 看美女 }],emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: rgba(0, 0, 0, 0.5)}}}]};myChart2.setOption(option2)/script
/body
/html 具体你需要配置什么标题、解释文字、颜色这些你可以直接在在线示例里修改它的代码然后慢慢找代码的哪个地方对应图表的哪个地方
具体例子还可以到这个网站去看看echarts官网 | 中文官网 另外在Vue中使用echart图表的话建议刚刚那些代码写在mounted( )函数里这样的话根据option里的配置数据或者是绑定了data里的初始数据当页面刚进入就能看到一个初始的图表样子。
mounted () {let myChart echarts.init(document.querySelector(#main))myChart.setOption({// 大标题title: {text: 消费账单列表,left: center},// 提示框tooltip: {trigger: item},// 图例legend: {orient: vertical,left: left},// 数据项series: [{name: 消费账单,type: pie,radius: 50%, // 半径data: [{ value: 1048, name: 球鞋 },{ value: 735, name: 防晒霜 }],emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: rgba(0, 0, 0, 0.5)}}}]})
}, 那么如果你要动态更新的话只需要在Vue的methods函数配置项里设置一个函数在这个函数里再次.setOption( )就可以了动态更新了。
但是这里有一个需要注意的你在methods的函数里设置.setOption( )说明你已经离开mounted函数了那就拿不到【代表echarts图表的容器】了那怎么setOption呢记住一点只要要在Vue里想全局使用某个变量就把他挂到data里。那么这里也可以把【代表echarts图表的容器】挂到data
上面的例子改一下数据配置啥的代码省略了一样的
data: {//挂载的全局变量list: [],name: ,price:
},
computed: {某函数 () {return 统计结果}
},
created () {//做一些网络数据请求、数据操作
},
mounted () {//直接一个【this.变量】甚至都不用在data里设置变量就可以到处用它了this.myChart echarts.init(document.querySelector(#main))this.myChart.setOption({//echarts的数据配置})
},
现在再拿【this.变量】去setOption()就可以更新图表了
methods: {// 更新图表// 现在就可以用this.myChart去调用setOption()了this.myChart.setOption({// 其他项可以不用复制过来只用设置要修改的数据项就好了// 数据项series: [{// 这里也不是一个一个数据写好去配置而是采用动态配置// data: [// { value: 1048, name: 球鞋 },// { value: 735, name: 防晒霜 }// ]data: this.list.map(item ({ value: item.price, name: item.name}))//这里先解释一下.map()函数是什么意思//.map()函数是遍历数组每个成员然后return一个经过修改的值作为遍历到的这个成员的新值//item是自定义的代表遍历到的数组的每一个成员//然后()箭头函数如果是一个值、一句话、一个表达式就代表这就是要return的内容//例子中{ value: item.price, name: item.name }就是return这么一个对象值//为什么用()包住这个对象因为对象外层是{}箭头函数会当成这是一个函数体要用()包起来//然后为什么要修改list数组的值//因为前面我们把网络数据返回的内容给到了data设的数组list//然后我们要去用console.log()检查这些数据有什么内容哪些有用要哪些没用不要//然后发现echarts需要的data的配置参数只有value和name这两个参数//那我们就只提取出list的每一个对象成员的符合value和name这两个参数要的值//然后把list的每一个对象成员设置成{ value: xxx, name: xxx }这种形式,就符合echarts示例所需要得到配置参数要求了}]})
}, 这里先解释一下.map()函数是什么意思 .map()函数是遍历数组每个成员然后return一个经过修改的值作为遍历到的这个成员的新值。item是自定义的代表遍历到的数组的每一个成员 然后()箭头函数如果是一个值、一句话、一个表达式就代表这就是要return的内容 例子中{ value: item.price, name: item.name }就是return这么一个对象值 为什么用()包住这个对象因为对象外层是{}箭头函数会当成这是一个函数体要用()包起来 然后为什么要修改list数组的值 因为前面我们把网络数据返回的内容给到了data设的数组list然后我们要去用console.log()检查这些数据有什么内容哪些有用要哪些没用不要 然后发现echarts需要的data的配置参数只有value和name这两个参数那我们就只提取出list的每一个对象成员的符合value和name这两个参数要的值 然后把list的每一个对象成员设置成{ value: xxx, name: xxx }这种形式,就符合echarts示例所需要得到配置参数要求了 兄弟们我解释得很透彻很幸苦各位好好看点个赞 另外把整个例子完整代码放这里
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/title!-- CSS only --linkrelstylesheethrefhttps://cdn.jsdelivr.net/npm/bootstrap5.1.3/dist/css/bootstrap.min.css/style.red {color: red!important;}.search {width: 300px;margin: 20px 0;}.my-form {display: flex;margin: 20px 0;}.my-form input {flex: 1;margin-right: 20px;}.table :not(:first-child) {border-top: none;}.contain {display: flex;padding: 10px;}.list-box {flex: 1;padding: 0 30px;}.list-box a {text-decoration: none;}.echarts-box {width: 600px;height: 400px;padding: 30px;margin: 0 auto;border: 1px solid #ccc;}tfoot {font-weight: bold;}media screen and (max-width: 1000px) {.contain {flex-wrap: wrap;}.list-box {width: 100%;}.echarts-box {margin-top: 30px;}}/style/headbodydiv idappdiv classcontain!-- 左侧列表 --div classlist-box!-- 添加资产 --form classmy-forminput v-model.trimname typetext classform-control placeholder消费名称 /input v-model.numberprice typetext classform-control placeholder消费价格 /button clickadd typebutton classbtn btn-primary添加账单/button/formtable classtable table-hovertheadtrth编号/thth消费名称/thth消费价格/thth操作/th/tr/theadtbodytr v-for(item, index) in list :keyitem.idtd{{ index 1 }}/tdtd{{ item.name }}/tdtd :class{ red: item.price 500 }{{ item.price.toFixed(2) }}/tdtda clickdel(item.id) hrefjavascript:;删除/a/td/tr/tbodytfoottrtd colspan4消费总计 {{ totalPrice.toFixed(2) }}/td/tr/tfoot/table/div!-- 右侧图表 --div classecharts-box idmain/div/div/divscript srchttps://cdn.jsdelivr.net/npm/echarts5.4.0/dist/echarts.min.js/scriptscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscript srchttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js/scriptscript/*** 接口文档地址* https://www.apifox.cn/apidoc/shared-24459455-ebb1-4fdc-8df8-0aff8dc317a8/api-53371058* * 功能需求* 1. 基本渲染* (1) 立刻发送请求获取数据 created* (2) 拿到数据存到data的响应式数据中* (3) 结合数据进行渲染 v-for* (4) 消费统计 计算属性* 2. 添加功能* (1) 收集表单数据 v-model* (2) 给添加按钮注册点击事件发送添加请求* (3) 需要重新渲染* 3. 删除功能* (1) 注册点击事件传参传 id* (2) 根据 id 发送删除请求* (3) 需要重新渲染* 4. 饼图渲染* (1) 初始化一个饼图 echarts.init(dom) mounted钩子实现* (2) 根据数据实时更新饼图 echarts.setOption({ ... })*/const app new Vue({el: #app,data: {list: [],name: ,price: },computed: {totalPrice () {return this.list.reduce((sum, item) sum item.price, 0)}},created () {// const res await axios.get(https://applet-base-api-t.itheima.net/bill, {// params: {// creator: 小黑// }// })// this.list res.data.datathis.getList()},mounted () {this.myChart echarts.init(document.querySelector(#main))this.myChart.setOption({// 大标题title: {text: 消费账单列表,left: center},// 提示框tooltip: {trigger: item},// 图例legend: {orient: vertical,left: left},// 数据项series: [{name: 消费账单,type: pie,radius: 50%, // 半径data:[{ value: 1048, name: 球鞋 },{ value: 735, name: 防晒霜 }],emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: rgba(0, 0, 0, 0.5)}}}]})},methods: {async getList () {const res await axios.get(https://applet-base-api-t.itheima.net/bill, {params: {creator: 小黑}})this.list res.data.dataconsole.log(res.data.data)console.log(this.list)// 更新图表this.myChart.setOption({// 数据项series: [{// data: [// { value: 1048, name: 球鞋 },// { value: 735, name: 防晒霜 }// ]data: this.list.map(item ({ value: item.price, name: item.name}))//这里这么写是因为//看echarts的这个示例的源码的配置数据可以知道在这个配置数据的data这里只能有value和name这两个参数//然后我们console.log可以看到我们拿到的对象数据里很乱什么值都有但是没有value这个参数名name刚好有//但是我们打印输出可以注意到对象里的price值就对应着value要的值name值对应name要的值//那么只是名字不一样而且还有别的多余的参数那就把获取到对象数据的list数组修改一下里面的内容//用map函数item是自定义的代表遍历到数组的每一个成员那么item.price不就是这个对象成员的price项吗//这样一来list数组每个对象成员就变成{ value: xxx, name: xxx }这种形式了就符合echarts示例所需要得到配置参数要求了}]})},async add () {console.log(this.list)if (!this.name) {alert(请输入消费名称)return}if (typeof this.price ! number) {alert(请输入正确的消费价格)return}// 发送添加请求const res await axios.post(https://applet-base-api-t.itheima.net/bill, {creator: 小黑,name: this.name,price: this.price})// 重新渲染一次this.getList()this.name this.price },async del (id) {// 根据 id 发送删除请求const res await axios.delete(https://applet-base-api-t.itheima.net/bill/${id})// 重新渲染this.getList()}}})/script/body
/html
