echarts.js 官网

http://echarts.baidu.com/

效果：

代码：

 updated:function(){this.$nextTick(function () {/****************************************************  大数据页面 str************************************************************/var oUsercount = echarts.init(document.getElementById('pie_usercount'));var default_fc = "#00eaff";var default_fs = "12";var pointLine_color = "#3ca5fe";//月交易折线的颜色var daylyPointLine_color = "#fdd849";//日交易额折线的颜色var opt_usercount = {color:["#fdd324","#7be7ed","#fd642d","#158df2","#155ef2"],//每段图默认的颜色，按顺序tooltip: {//全局设置trigger: 'item',formatter: "{a} <br/>{b}: {c} ({d}%)"},legend : {//说明文字的设置width:80,height:120,itemWidth:10,itemHeight:10,orient: 'vertical',//x: 'left',//图&文字的排列方向right:20,//legend定位top:70,//data: ['平台用户', '城市运营商', '装修公司', '普通设计师', 'VIP设计师'],//与series 的data要一一对应textStyle: {//说明文字的样式color: default_fc, fontSize: default_fs}},series: [{//pie图显示设置name:'用户数量详情',//系列名称 {a|{a}}type:'pie',radius: ['40%', '60%'],center:['40%','50%'],//居中位置["x","y"]avoidLabelOverlap: false,label: {normal: {show: true,position: 'outline',textStyle: {fontSize:default_fs,fontWeight: 'bold'},formatter:"{b}: {d}%"//饼图上显示文字的格式设置，b和d 都有特殊代表},emphasis: {show: true,textStyle: {fontSize: default_fs,fontWeight: 'bold'}}},labelLine: {normal: {lineStyle: {color: 'green'}}},//data: ['平台用户', '城市运营商', '装修公司', '普通设计师', 'VIP设计师'],data:[{value:335, name:'平台用户'},{value:310, name:'城市运营商'},{value:234, name:'装修公司'},{value:135, name:'普通设计师'},{value:1548, name:'VIP设计师'}]}]};// 使用刚指定的配置项和数据显示图表。oUsercount.setOption(opt_usercount);//设置初始化数据

注意：要放在updated中，且要加上this.$nextTick(function(){     })

效果2：

code:

//月交易额详情var oMonthsum = echarts.init(document.getElementById('line_monthsum'));var opt_monthsum = {
//  color:"#3ca5fe",grid:{left:'20%'},//这个可以调整Y轴距离父容器边距tooltip: {trigger: 'axis',axisPointer: {type: 'cross'}},toolbox: {show: true,feature: {saveAsImage: {}}},xAxis:  {name:"(单位：月份)",nameLocation:"end",align:"center",type: 'category',boundaryGap: false,data: ['10','11','12','1', '2', '3', '4', '5', '6', '7', '8', '9'],nameTextStyle:{//名称的样式color:default_fc,verticalAlign:"bottom",padding:[70,0,0,-84]//调整x轴名称的position},axisLabel:{//轴线label文字color:default_fc,fontSize:default_fs},axisLine:{//直角坐标系的轴线shadowColor: 'rgba(0, 0, 0, 0.5)',shadowBlur: 10,lineStyle:{color:default_fc}}},yAxis: {name:"(单位：元)",type: 'value',axisLabel: {formatter: '{value}'},axisPointer: {snap: true},axisLine:{show:false,shadowColor: 'rgba(0, 0, 0, 0.5)',shadowBlur: 10,lineStyle:{color:default_fc}}},visualMap: {show: false,dimension: 0,pieces: [{lte: 6,color: pointLine_color}, {gt: 6,lte: 8,color:pointLine_color}, {gt: 8,lte: 14,color: pointLine_color}, {gt: 14,lte: 17,color: pointLine_color}, {gt: 17,color: pointLine_color}]},series: [{name:'月交易额',type:'line',smooth: true,//data: [300, 280, 250, 260, 270, 300, 550, 500, 400, 390, 380, 390, 400, 500, 600, 750, 800, 700, 600, 400],data:vm.alldata.monChart,markArea: {data: [ [{name: '早高峰',xAxis: '07:30'}, {xAxis: '10:00'}], [{name: '晚高峰',xAxis: '17:30'}, {xAxis: '21:15'}] ]}}]};oMonthsum.setOption(opt_monthsum);

注意：也是要放在vue.js中的updated:function(){this.$nextTick(function(){     })}中，更新数据。

echarts.js 官网相关推荐

echarts.js官网
echarts.js 官网 http://echarts.baidu.com/ 效果: 代码: updated:function(){this.$nextTick(function () {/**** ...
Node.js 官网入门教程（二） npm（安装、包版本、卸载、npx）、package.json（scripts、devDependencies）package-lock.json（语义版本规则符号
Node.js 官网入门教程(二) npm(包管理.安装.包版本.卸载.npx).package.json(scripts.devDependencies).package-lock.json(语义版 ...
knockout+html绑定,Knockout.Js官网学习（style绑定、attr绑定）
Style绑定 style绑定是添加或删除一个或多个DOM元素上的style值.比如当数字变成负数时高亮显示,或者根据数字显示对应宽度的Bar.(注:如果你不是应用style值而是应用CSS clas ...
2021最新Node.js官网安装教程，配置环境变量（图文详细）
打开官网 Node.js官网 ,选择自己的版本,这里我使用的是Windows64位的,下载.msi安装包下载之后,双击运行点击next下一步勾选同意,点击Next下一步选择安装路径,这里我选择 ...
Node.js 官网入门教程（一） CommonJS 模块规范、Node.js REPL、console、CLI、exports
Node.js 官网入门教程(一) CommonJS 模块规范.Node.js REPL.console.CLI.exports 文章目录 Node.js 官网入门教程(一) CommonJS 模块规 ...
React.js 官网入门教程分离文件操作无法正常显示HelloWord
对着React官网的教程练习操作,在做到分离文件练习时,按照官网步骤来却怎么也无法正常显示HelloWord. 经测试,html文件中内容改为: <!DOCTYPE html> <h ...
可视化有关JS官网链接
[threeJs]3d建模基于webGL threejs官网:https://threejs.org/ threejs中文教程:Three.js 中文教程 | 参考手册 | 使用指南 | 动画特效 ...
【工程师综合项目二】React + Koa2打造『JS++官网管理后台』
Redis认知.安装与操作 MongoDB:动态数据库,如游戏中需要频繁地保存人物的坐标 Oracle:收费,企业级 mac要安装homebrew(包管理工具) window安装Redis程序运行教程 ...
Knockout.Js官网学习（创建自定义绑定）
前言你可以创建自己的自定义绑定 – 没有必要非要使用内嵌的绑定(像click,value等).你可以你封装复杂的逻辑或行为,自定义很容易使用和重用的绑定.例如,你可以在form表单里自定义像grid ...

echarts.js 官网

echarts.js 官网相关推荐

最新文章

热门文章