vue 常用的 Echarts 示例

为啥要整理这一篇博文呢？其实最近做大屏做的恶心了，好多echarts图表，样式花里胡哨，调样式太费劲了，然后把做过的拿下来备份一下，需要的话直接粘贴稍作修改就可以了。
echarts配置项官网：https://echarts.apache.org/zh/option.html#title

多条柱形图

 option = {animation: false,title: {text: '本周主煤流系统启动平均时长',textAlign: 'left',x: 'center',y: 'top',textStyle: {color: 'rgba(255, 255, 255, 0.8)',fontSize: 14}},color: ['#0d81f7', '#0fb42c'],tooltip: {},legend: {show: true,top: 18,right: 0,data: ["主煤流系统手动启动时长", "主煤流智能启动时长"],textStyle: {color: 'rgba(255, 255, 255, 0.8)',fontSize: 10},itemWidth: 10,itemHeight: 10},xAxis: {axisTick: {show: false},axisLine: {lineStyle: {color: '#0092D5'}},axisLabel: {color: 'rgba(255, 255, 255, 0.8)'},data: ['2020-01','2020-02','2020-03','2020-04','2020-05','2020-06'],},yAxis: {name: "(分钟)",nameTextStyle: {color: 'rgba(255, 255, 255, 0.8)',align: 'right'},splitLine: {lineStyle: {type: 'dashed',color: '#0092D5',opacity: 0.3}},axisLine: {show: false,},axisLabel: {color: 'rgba(255, 255, 255, 0.8)'},},grid: {top: '35%',bottom: '17%',left: '7%',right: '2%'},series: [{name: "主煤流系统手动启动时长",barWidth: 15,type: 'bar',data: [1,2,3,4,5,6],itemStyle: {normal: {label: {show: true, //开启显示position: 'insideLeft', //在上方显示offset: [-8, 0],textStyle: { //数值样式color: '#fff',fontSize: 10}},color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{offset: 0,color: "#0069F5" // 0% 处的颜色}, {offset: 1,color: "#35C3FF" // 100% 处的颜色}], false)}},}, {name: "主煤流系统智能启动时长",barWidth: 15,type: 'bar',data: [2,3,4,5,6,7],itemStyle: {normal: {label: {show: true, //开启显示position: 'insideRight', //在上方显示offset: [8, 0],textStyle: { //数值样式color: '#fff',fontSize: 10}},color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{offset: 0,color: "#03AC32" // 0% 处的颜色}, {offset: 1,color: "#69EF00" // 100% 处的颜色}], false)}},}]};

多条曲线图

 option = {color: ['#1890FF', '#FF7D00'],tooltip: {},legend: {show: true,top: 15,right: 0,align: 'left',x: 'center',y: 'top',icon: 'rect',itemHeight: 5,itemWidth: 15,data: ["智能配煤","非智能配煤"],textStyle: {color: 'rgba(255, 255, 255, 0.8)',fontSize: 12},},xAxis: {axisTick: {show: false},axisLine: {lineStyle: {color: '#0092D5'}},axisLabel: {color: 'rgba(255, 255, 255, 0.8)'},data: ['2020-01','2020-02','2020-03','2020-04','2020-05','2020-06']},yAxis: {name: "(万元)",nameTextStyle: {color: 'rgba(255, 255, 255, 0.8)',align: 'right'},splitLine: {lineStyle: {type: 'dashed',color: '#0092D5',opacity: 0.3}},axisLine: {show: false,},axisLabel: {color: 'rgba(255, 255, 255, 0.8)'},},grid: {top: '25%',bottom: '10%',left: '10%',right: '2%'},series: [{name: "智能配煤",barWidth: 15,type: 'line',smooth: true,data: [1,2,3,4,5,6],}, {name: "非智能配煤",barWidth: 15,type: 'line',smooth: true,data: [3,4,5,6,7,8],}]};

柱形图配折线图

 option = {title: {text: '近一周全矿井产量',textAlign: 'left',x: 'center',y: 'top',textStyle: {color: 'rgba(255, 255, 255, 0.8)',fontSize: 14}},color: ['#0d81f7', '#0fb42c', '#e97507'],tooltip: {},legend: {show: true,top: 3,right: 0,data: ["综采1","综采2", "总计"],textStyle: {color: 'rgba(255, 255, 255, 0.8)',fontSize: 12},itemWidth: 12,itemHeight: 12},xAxis: {axisTick: {show: false},axisLine: {lineStyle: {color: '#0092D5'}},axisLabel: {color: 'rgba(255, 255, 255, 0.8)'},data: ['2020-01','2020-02','2020-03','2020-04','2020-05','2020-06']},yAxis: {name: "(吨)",nameTextStyle: {color: 'rgba(255, 255, 255, 0.8)',align: 'right'},splitLine: {lineStyle: {type: 'dashed',color: '#0092D5',opacity: 0.3}},axisLine: {show: false,},axisLabel: {color: 'rgba(255, 255, 255, 0.8)'},},grid: {top: '20%',bottom: '10%',left: '10%',right: '2%'},series: [{name: "综采1",barWidth: 15,type: 'bar',data: [1,2,3,4,5,6],itemStyle: {normal: {label: {show: true, //开启显示position: 'insideLeft', //在上方显示offset: [-8, 0],textStyle: { //数值样式color: '#fff',fontSize: 10}},color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{offset: 0,color: "#0069F5" // 0% 处的颜色}, {offset: 1,color: "#35C3FF" // 100% 处的颜色}], false)}},}, {name: "综采2",barWidth: 15,type: 'bar',data: [3,4,5,6,7,8],itemStyle: {normal: {label: {show: true, //开启显示position: 'insideRight', //在上方显示offset: [8, 0],textStyle: { //数值样式color: '#fff',fontSize: 10}},color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{offset: 0,color: "#03AC32" // 0% 处的颜色}, {offset: 1,color: "#69EF00" // 100% 处的颜色}], false)}},}, {name: "总计",barWidth: 15,type: 'line',color: '#f67a03',data: [8,9,10,11,12,13],}]};

柱形图堆积

 option = {color: ['#acff02', '#fac800', '#ff7d00', '#0fb42c'],tooltip: {trigger: 'axis',axisPointer: {            // Use axis to trigger tooltiptype: 'shadow'        // 'shadow' as default; can also be 'line' or 'shadow'}},legend: {show: true,top: 15,right: 0,x: 'center',y: 'top',data: ["生产队1","生产队2","生产队3", "总计"],textStyle: {color: 'rgba(255, 255, 255, 0.8)',fontSize: 12},itemWidth: 12,itemHeight: 12},xAxis: {axisTick: {show: false},axisLine: {lineStyle: {color: '#0092D5'}},axisLabel: {color: 'rgba(255, 255, 255, 0.8)'},data:  ['2020-01','2020-02','2020-03','2020-04','2020-05','2020-06']},yAxis: {name: "(吨)",nameTextStyle: {color: 'rgba(255, 255, 255, 0.8)',align: 'right'},splitLine: {lineStyle: {type: 'dashed',color: '#0092D5',opacity: 0.3}},axisLine: {show: false,},axisLabel: {color: 'rgba(255, 255, 255, 0.8)'},},grid: {top: '25%',bottom: '10%',left: '12%',right: '2%'},series: [{name:  "生产队1",barWidth: 15,type: 'bar',stack: 'total',emphasis: {focus: 'series'},data: [1,2,3,4,5,6],itemStyle: {normal: {label: {show: true, //开启显示position: 'insideRight', //在上方显示offset: [-8, 0],textStyle: { //数值样式color: '#fff',fontSize: 10}},}},}, {name: "生产队2",barWidth: 15,type: 'bar',stack: 'total',emphasis: {focus: 'series'},data:[2,3,4,5,6,7],itemStyle: {normal: {label: {show: true, //开启显示position: 'insideRight', //在上方显示offset: [-8, 0],textStyle: { //数值样式color: '#fff',fontSize: 10,}},}},}, {name: "生产队3",barWidth: 15,type: 'bar',stack: 'total',emphasis: {focus: 'series'},data:[5,6,7,8,9,10],itemStyle: {normal: {label: {show: true, //开启显示position: 'insideRight', //在上方显示offset: [-8, 0],textStyle: { //数值样式color: '#fff',fontSize: 10}},}},}, {name: '总计',barWidth: 15,type: 'bar',data: [21,22,23,34,25,25],itemStyle: {normal: {label: {show: true, //开启显示position: 'insideLeft', //在上方显示offset: [8, 0],textStyle: { //数值样式color: '#fff',fontSize: 10}},color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{offset: 0,color: "#0069F5" // 0% 处的颜色}, {offset: 1,color: "#35C3FF" // 100% 处的颜色}], false)}},}]};

饼图

option = {title: {text: '各生产队工效',textAlign: 'left',x: 'center',y: 'top',top: '7%',textStyle: {color: 'rgba(255, 255, 255, 0.8)',fontSize: 12}},tooltip: {},legend: {orient: 'vertical',top: '50%',left: '15%',textStyle: {color: 'rgba(255, 255, 255, 0.8)',fontSize: 12},itemWidth: 12,itemHeight: 12},grid: {top: '20%',bottom: '10%',left: '10%',right: '10%'},series: [{name: '功效',type: 'pie',radius: [15, 70],center: ['68%', '60%'],// roseType: 'area',itemStyle: {borderRadius: 2},label: {position: 'inside',formatter: '{c}吨/人天',fontWeight: 600,color: '#fff'},data: [{value:12,name: "生产队1"},{value:34,name: "生产队2"},{value:23,name: "生产队3"}]}]};

进度环形图

 option = {color: ['#414f5b', '#1890ff'],series: [{name: '任务进度',type: 'pie',radius: ['75%', '100%'],avoidLabelOverlap: false,hoverAnimation: false,labelLine: {normal: {show: false}},data: [{value: 25,label: {normal: {show: false,}}}, {   // 数据值value: 75,// 数据项名称name: "采煤机开机率",//该数据项是否被选中selected: false,// 单个扇区的标签配置label: {// 是显示标签show: true,position: 'center',fontSize: 14,color: '#fff',lineHeight: 15,formatter: '\n{b}\n\n ' + `{a| {c} }` + '\n\n%',rich: {a: {color: '#1890ff',fontSize: 30,fontWeight: 600,}}},}]}]};

雷达图

 option = {color: ['#fa0145', '#02f8f9'],tooltip: {show: true},radar: {nameGap: 7,axisLine: {lineStyle: {color: '#0781c0',type: 'dashed'}},name: {color: '#fff'},splitLine: {lineStyle: {color: '#0781c0',type: 'dashed'}},splitArea: {show: false,areaStyle: {color: 'rgba(255,0,0,0)', // 图表背景的颜色},},indicator: ["人员","设备","环境","管理"]},series: [{name: '',type: 'radar',data: [{value: //[4200, 3000, 20000, 35000],name: '',areaStyle: {color: '#fa0145',opacity: 0.1,},itemStyle: { // 折线拐点标志的样式。normal: { // 普通状态时的样式lineStyle: {width: 1},opacity: 0.2},emphasis: { // 高亮时的样式lineStyle: {width: 5},opacity: 1}},},{value: [6200, 2000, 30000, 25000],name: '风险评估',areaStyle: {color: '#02f8f9',opacity: 0.1,},itemStyle: { // 折线拐点标志的样式。normal: { // 普通状态时的样式lineStyle: {width: 1},opacity: 0.2},emphasis: { // 高亮时的样式lineStyle: {width: 5},opacity: 1}},}]}]};

标线、柱形图重叠

这个是临时补充的一个，因为有的报表需要展示一根标准线，比如达到多少是标准，在图表上显示标准是多少需要在x轴或者是y轴画一条标准线。

另一个就是有的设计师设计两条柱形图相交在一起，这里也配置了一下，根据实际情况自己稍微修改就可以了。

option = {title: {text: 'World Population'},tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}},legend: {},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: {type: 'value',boundaryGap: [0, 0.01]},yAxis: {type: 'category',data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']},series:[{name: '2011',type: 'bar',data: [18203, 23489, 29034, 104970, 131744, 630230],barGap: '-50%',z: 3,markLine: {data: [{name: 'X 轴值为 100 的竖直线',xAxis: 123456}],silent: true,symbolSize: 'minorSplitLine',}},{name: '2012',type: 'bar',data: [19325, 23438, 31000, 121594, 134141, 681807]}]
};

vue 常用的 Echarts 示例相关推荐

分享7个常用的echarts示例
1.对于位置不够显示的坐标值,使用斜显示 "xAxis>axisLabel>rotate"设置倾斜角度: xAxis: {type: 'category',axisLa ...
vue封装echarts示例
1.首先先弄明白vue怎么引入echarts示例,再弄封装echarts这个事情vue框架引入echarts示例 2.封装组件 pops是: 父组件通过v-bind向子组件传值,子组件通过props来 ...
vue框架导入echarts第一个示例
1.首先创建vue框架以前创建vue框架链接 2.安装插件安装axios请求插件安装echarts插件(不会安装看安装axios请求插件,两个安装一样的) npm install echarts ...
Vue项目引入echarts
参考链接:https://blog.csdn.net/guozhangqiang/article/details/82379306 1 首先进行全局安装: npm install echarts - ...
Vue中引入echarts的步骤，折线图、柱状图、饼图的常用配置项
vue中引入echarts 一.安装echarts 二.引入echarts 1.全局引入 2.局部引入三.vue中使用echarts 1.准备好函数 2.准备一个容器来放echarts 3.初始化容 ...
Vue常用特性~非常详细哦，带源码资料
下面是对Vue常用特性的整理,希望可以帮助到有需要的小伙伴~ 源码资料: 链接:https://pan.baidu.com/s/14rRYtUfXkO6mxUtCh4FCcA 提取码:e0sw 文章目 ...
Vue常用的组件库大全【前端工程师必备】【实时更新】【移动端、PC端（web端）、数据可视化组件库（数据大屏）、动画组件库、3D组件库】
Vue常用的组件库大全[前端工程师必备] (一)移动端常用组件库 1)Vant ui 2)Cube UI 3)VUX 4) NuTUI 5)Mint ui 6)Varlet UI 7)OnsenUI ...
Vue常用经典开源项目汇总参考-海量
Vue常用经典开源项目汇总参考-海量 Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的 ...
【Echarts】在Vue中使用Echarts
在Vue中使用Echarts 引入第三方库vue-echarts vue-echarts安装与使用 vue2中使用Echarts vue-echarts安装 vue2中使用Echarts vue3中使 ...

vue 常用的 Echarts 示例

vue 常用的 Echarts 示例

多条柱形图

多条曲线图

柱形图配折线图

柱形图堆积

饼图

进度环形图

雷达图

标线、柱形图重叠

vue 常用的 Echarts 示例相关推荐

最新文章

热门文章