echarts 之常用的属性配置

饼形图相关

        series: [{type: "pie", //类型center: this.pieChartCenter,// 所处位置radius: this.pieChartRadius, // 半径minAngle: 5,avoidLabelOverlap: true,roseType: "radius", // 半径类型显示hoverOffset: 20,label: { show: true, // 是否显示饼形图的 文本 + 连线  从图延伸到文本position: "outer",width: 10,height: 0,lineHeight: 0,labelLine: { // 从图延伸到文本 线的长度length: 2,length2: 10,},backgroundColor: "auto",padding: [2, -2, 2, -2],borderRadius: 2,distanceToLabelLine: 0,// 对饼形图 字体 和 显示的字体换行 数字类型 formatter: "{top|{b}} \n {bottom|{c}}",align: "center",rich: {top: {color: "#333",fontSize: 12,verticalAlign: "bottom",padding: [2, 2, 2, 2],align: "center",},bottom: {color: "#333",fontSize: 12,padding: [2, 2, 2, 2],verticalAlign: "top",align: "center",},},},//饼形图的数据data: pieChartData,},],

柱状图相关

简单的柱状图

      let option = {// 调整图的 位置grid: {left: "0",top: "40",right: "0",bottom: "10",containLabel: true,},xAxis: {type: "category",data: ["2017", "2018", "2019", "2020"],axisTick: {show: false, //把x轴的坐标轴 刻度去掉},/*改变x轴颜色*/axisLine: {lineStyle: {color: "#ccc",width: 1, //这里是为了突出显示加上的},},axisLabel: { // x轴刻度的文本的修饰textStyle: {fontSize: 10,color: "#999",},},},yAxis: {type: "value",yAxisIndex: 0, //设置y轴的层叠性为0//y轴刻度axisLabel: {//设置y轴数值为%formatter: "{value}%",textStyle: {fontSize: 10,color: "#999",},},axisTick: {show: false, //把x轴的坐标轴 刻度去掉},/*改变y轴颜色*/axisLine: {lineStyle: {color: "transparent",width: 1, //这里是为了突出显示加上的},},},series: [{data: ["1.64", "1.84", "1.71", "1.84"],itemStyle: {//此时的color可以给柱子修改颜色color: function (params) {return myColor[params.dataIndex];},},barWidth: "75%", //这是柱子的宽度type: "bar",label: {normal: {show: true,position: "top",formatter: "{c}%",},},},],};

多柱状图

 data = [[ "product","name1","name2","name3"],[ "2017年", "1.38","1.05", "1.03"],["2018年","1.42","1.96", "1.22" ],[ "2019年", "1.34", "1.30", "1.4" ],[ "2020年","1.09", "1.30", "1.03"]]let option = {color: ["#1d87f0", "#af7898", "#ffca7b"],legend: {},tooltip: {},dataset: {// 数据的展示source: barChartData,},// 调整图的 位置grid: {left: "0",top: "40",right: "0",bottom: "20",containLabel: true,},xAxis: {type: "category",axisTick: {show: false, //把x轴的坐标轴 刻度去掉},/*改变x轴颜色*/axisLine: {lineStyle: {color: "#ccc",width: 1, //这里是为了突出显示加上的},},axisLabel: {textStyle: {fontSize: 10,color: "#999",},},},yAxis: {type: "value",//y轴刻度axisLabel: {//设置y轴数值为%// formatter: "{value}%", // 设置y轴的百分百textStyle: {fontSize: 10,color: "#999",},},axisTick: {show: false, //把x轴的坐标轴 刻度去掉},/*改变x轴颜色*/axisLine: {lineStyle: {color: "transparent",width: 1, //这里是为了突出显示加上的},},},series: [{ type: "bar" }, { type: "bar" }, { type: "bar" }],};

折线图

      let option = {xAxis: {type: "category",data: lineChartData.lineDataX, // x轴的数据axisTick: {show: false, //把x轴的坐标轴 刻度去掉},/*改变x轴颜色*/axisLine: {lineStyle: {color: "#ccc",width: 1, //这里是为了突出显示加上的},},axisLabel: {textStyle: {fontSize: 10,color: "#666",},},},yAxis: {type: "value",// y轴刻度的设置max: 1100,min: 900,minInterval: 0,interval: 50, //每次增加几// formatter: function (value) { //y轴保留一位小数点//   return value.toFixed(1);// },axisLabel: {// y轴的字体textStyle: {fontSize: 10,color: "#666",},},axisTick: {show: false, //把y轴的坐标轴 刻度去掉},axisLine: {show: false, //是否显示坐标轴轴线。},splitLine: {lineStyle: {color: "#f8f8f8", // y轴的分割线},},},// 调整图的 位置grid: {left: "0",top: "10",right: "0",bottom: "0",containLabel: true,},series: [{data: lineChartData.lineData, // 折线图的数据type: "line",// 设置拐点 相关的symbolSize: 10,itemStyle: {borderColor: this.areaStyleColor.lineColor, //拐点颜色borderWidth: 3,color: "#333", //拐点文本},// y折轴线 的颜色lineStyle: {color: this.areaStyleColor.lineColor,},emphasis: {// 鼠标经过时：color: this.areaStyleColor.lineColor,borderColor: "#3987ed",},label: {normal: {show: true, // 折线上的文字是否显示// position: [-15, -18],fontSize: 10,position: [-15, -10],},},// 渐变areaStyle: {color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: this.areaStyleColor.from,},{offset: 1,color: this.areaStyleColor.to,},]),},},],};

echarts 之常用的属性配置相关推荐

bigint hive java类型_三十、Hive的数据类型以及常用的属性配置
上篇文章我们在服务器上部署了Hive并将它的Metastore存储在了MySQL上,本文介绍一下Hive的数据类型以及常用的一些属性配置.关注专栏<破茧成蝶--大数据篇>,查看更多相关的内 ...
三十、Hive的数据类型以及常用的属性配置
上篇文章我们在服务器上部署了Hive并将它的Metastore存储在了MySQL上,本文介绍一下Hive的数据类型以及常用的一些属性配置.关注专栏<破茧成蝶--大数据篇>,查看更多相关的内 ...
Spring Boot 属性配置你所不知道的细节
今天我们要聊的这个问题,可能工作5年的资深程序员也不一定搞得很清楚,但是我敢保证在开发 Web 应用过程中大家都遇到过. 这个问题就是: Spring Boot 应用程序读取配置属性时,不同配置源的优 ...
【Android Gradle 插件】PackagingOptions 配置 ④ ( pickFirsts、merges、excludes 属性配置 Set＜String＞类型属性值常用配置方法 )
文章目录一.清空 pickFirsts.merges.excludes 属性配置二.追加 pickFirsts.merges.excludes 属性配置三.减少 pickFirsts.merge ...
Echarts的常用api
一.Echarts 二.图表的常用API属性设置 1.柱状图 2.折线图 1)给折线图下方添加阴影 3.移动端手势放大柱状图折线图 4.点击事件 5.案例: 1)不同线条的折线图 2)在vue中的使用 ...
【Echarts】ECharts中常用的标签
详细的标签详解 ECharts中常用的标签 ECharts中常用的标签 title标签 legend tooltip xAxis和yAxis 不同种类图的区别 ECharts中常用的标签 title标 ...
【Echarts】echarts饼图、圆环图配置代码详解
前言简介:本文将从头开始,带你快速上手 echarts最常用图例-饼图准备:请自行先将echarts图例引入你的项目,本文不多介绍.(引入 echarts教程:http://t.csdn.cn/m ...
Linux网络属性配置相关命令
Linux网络属性配置相关命令: 前言: Linux属性配置可以分为两类.一类通过命令配置,另一类通过修改配置文件配置. Linux属性配置的相关命令可以分为三大类: 一.ifcfg命令家族:①ifc ...
linux网络属性配置
linux网络属性配置分动态分配和静态指定动态分配主要依靠DHCP服务器静态指定需要命令手动分配静态指定命令三家族 ifcfg家族 iproute2家族 nm家族 ifcfg家族: ifconf ...

echarts 之常用的属性配置

目录

echarts 之常用的属性配置

饼形图相关

柱状图相关

简单的柱状图

多柱状图

折线图

echarts 之常用的属性配置相关推荐

最新文章

热门文章