echarts树形图组织架构怎么将节点文字竖向排列 echarts 树

树图主要用来可视化树形数据结构，是一种特殊的层次类型，具有唯一的根节点，左子树，和右子树。

<template> <div ref="myChart"></div> </template> <script> import * as echarts from "echarts"; export default { mounted() { let myEcharts = echarts.init(this.$refs.myChart); let data = {// 注意，最外层是一个对象，代表树的根节点 name: "层级1",// 节点的名称，当前节点 label 对应的文本 children: [ { name: "层级2", children: [ { name: "层级3-1", children: [//子节点 { name: "数据1", value: 3938 }, // value 值，只在 tooltip 中显示 { name: "数据2", value: 3812 }, { name: "数据3", value: 6714 }, { name: "数据4", value: 743 }, ], }, { name: "层级3-2", children: [ { name: "数据1", value: 3534 }, { name: "数据2", value: 5731 }, { name: "数据3", value: 7840 }, { name: "数据4", value: 5914 }, { name: "数据5", value: 3416 }, ], }, ], }, ], }; let options = { tooltip: {//提示框 trigger: "item",//触发时机 }, series: [ { type: "tree",//树图 data: [data], top: "1%",//tree组件离容器顶部的距离 left: "7%", bottom: "1%", right: "20%", symbolSize: 10,//标记的大小 label: {//描述了每个节点所对应的文本标签的样式。 position: "left",//标签的位置。 verticalAlign: "middle",//文字垂直对齐方式 align: "right",//文字水平对齐方式 fontSize: 9, }, leaves: {//叶子节点的特殊配置 label: {//了叶子节点所对应的文本标签的样式 position: "right", verticalAlign: "middle", align: "left", }, }, emphasis: {//树图中个图形和标签高亮的样式。 focus: "descendant",//聚焦所有子孙节点 }, expandAndCollapse: true,//子树折叠和展开的交互由于绘图区域是有限的，而通常一个树图的节点可能会比较多， // 这样就会出现节点之间相互遮盖的问题。为了避免这一问题，可以将暂时无关的子树折叠收起， // 等到需要时再将其展开。如上面径向布局树图示例，节点中心用蓝色填充的就是折叠收起的子树， // 可以点击将其展开。 animationDuration: 550, animationDurationUpdate: 750, }, ], }; myEcharts.setOption(options); }, }; </script> <style> #myChart { width: 500px; height: 500px; border: 1px solid red; } </style>

<template> <div ref="myChart"></div> </template> <script> import * as echarts from "echarts"; export default { mounted() { let myEcharts = echarts.init(this.$refs.myChart); let data = {// 注意，最外层是一个对象，代表树的根节点 name: "层级1",// 节点的名称，当前节点 label 对应的文本 children: [ { name: "层级2", children: [ { name: "层级3-1", children: [//子节点 { name: "数据1", value: 3938 }, // value 值，只在 tooltip 中显示 { name: "数据2", value: 3812 }, { name: "数据3", value: 6714 }, { name: "数据4", value: 743 }, ], }, { name: "层级3-2", children: [ { name: "数据1", value: 3534 }, { name: "数据2", value: 5731 }, { name: "数据3", value: 7840 }, { name: "数据4", value: 5914 }, { name: "数据5", value: 3416 }, ], }, ], }, ], }; let options = { tooltip: {//提示框 trigger: "item",//触发时机 }, series: [ { type: "tree", data: [data], top: "1%", left: "7%", bottom: "1%", right: "20%", symbolSize: 10, //树图中 正交布局 的方向 // 水平 方向的 从左到右'LR'，从右到左'RL'； // 以及垂直方向的 从上到下'TB'，从下到上'BT' orient: 'BT', label: { position: "bottom", rotate: 90,//文字旋转 verticalAlign: "middle", align: "right", fontSize: 9, }, leaves: { label: { position: "right", verticalAlign: "middle", align: "left", }, }, emphasis: { focus: "descendant", }, expandAndCollapse: true, animationDuration: 550, animationDurationUpdate: 750, }, ], }; myEcharts.setOption(options); }, }; </script> <style> #myChart { width: 500px; height: 500px; border: 1px solid red; } </style>

<template> <div> <h1>This is an about page</h1> <!-- 2.echarts根结点根容器如果我们没有去指定当前容器的大小 echarts会按照0来进行处理 --> <div ref="demoh"></div> </div> </template> <script> import * as echarts from "echarts"; export default { mounted() { let myChart = echarts.init(this.$refs.demoh); let option = { dataset: [ //数据集组件用于单独的数据集声明，从而数据可以单独管理，被多个组件复用，并且可以自由指定数据到视觉的映射。这在不少场景下能带来使用上的方便。 { dimensions: ["分类", "数量"], //设置分类数据 source: [ //原始数据。一般来说，原始数据表达的是二维表。 ["Hannah Krause", 41], ["Zhao Qian", 20], ["Jasmin Krause ", 52], ["Li Lei", 37], ["Karle Neumann", 25], ["Adrian Groß", 19], ["Mia Neumann", 71], ], }, { transform: { //数据改变 type: "sort", //按照大小排序 config: { dimension: "数量", order: "desc" }, //"sort" 数据转换器的“条件” }, }, ], xAxis: { type: "category", axisLabel: { //坐标轴刻度标签的相关设置。 interval: 0, //坐标轴刻度标签的显示间隔，在类目轴中有效。 rotate: 30, //刻度标签旋转的角度 }, }, yAxis: {}, series: [ //系列 配置图表的类型 { type: "bar", encode: { //可以定义 data 的哪个维度被编码成什么。 x: "分类", //x映射内容 y: "数量", }, datasetIndex: 1, }, ], }; // 绘制图表 setOption 配置图表的配置项 myChart.setOption(option); }, }; </script> <style scoped> #myecharts { width: 600px; height: 600px; border: 2px solid red; } </style>

echarts中默认主题有两个:light、dark

echarts.init(选取容器dom,'主题')

<template> <div> <h1>This is an about page</h1> <div ref="demoh"></div> </div> </template> <script> import * as echarts from "echarts"; export default { mounted() { //echarts中默认主题有两个:light、dark let myChart = echarts.init(this.$refs.demoh,"dark"); let xData = ["美食", "数码", "日化", "蔬菜", "熟食"]; let yData = [88, 75, 20, 210, 35]; let option = { xAxis: { data: xData, type: "category", }, yAxis: { type: "value", }, series: [ { type: "bar", name: "销量", data: yData, }, ], }; myChart.setOption(option); }, }; </script> <style scoped> #myecharts { width: 600px; height: 600px; border: 2px solid red; } </style>

1.在主题编辑器中编辑主题

2.下载对应主题json格式

3.创建js文件把刚才下载的文件写入并且暴露

let roma=你的主题json

export default roma

4.引用主题文件  

import roma from "../assets/roma"

5.在init方法中使用主题

1.准备echarts基本结构

2.设置中国地图的矢量数据创建js文件 （在其中创建变量接受json数据 并且暴露）

3.在组件中获取地图矢量数据（引用数据json）

4.使用地图数据创建地图

<template> <div> <h1>This is an about page</h1> <div ref="demoh"></div> </div> </template> <script> import * as echarts from "echarts"; // 引用的就是中国各省份的矢量数据 import cmap from "../assets/roma" export default { mounted() { let myChart = echarts.init(this.$refs.demoh); echarts.registerMap("chinaMap",cmap)//使用 registerMap 注册的地图名称。 let option = { geo:{//地理坐标系组件。地理坐标系组件用于地图的绘制 type:"map", map:"chinaMap",//使用 registerMap 注册的地图名称 // 默认设置完地图是固定死的不能拖动 roam:true,//否开启鼠标缩放和平移漫游。默认不开启。 zoom :10,//当前视角的缩放比例。越大比例越大 center:[108.956239,34.268309],//当前视角的中心点，用经纬度表示108.956239,34.268309 label:{//地图上显示文字提示信息 show:true, color:"#ff6600", fontSize:10//字体大小 }, itemStyle:{//地图区域的多边形 图形样式。 areaColor:"#ff6600"//地图区域的颜色。 } } }; myChart.setOption(option); }, }; </script> <style scoped> #myecharts { width: 600px; height: 600px; border: 2px solid red; } </style>

同中国地图使用方式 就是切换地图数据即可

<template> <div> <h1>This is an about page</h1> <div ref="demoh"></div> </div> </template> <script> import * as echarts from "echarts"; import cmap from "../assets/roma"; export default { mounted() { // 设置气泡点数据 let data = [ { value: [108.956239, 34.268309], }, ]; let myChart = echarts.init(this.$refs.demoh); echarts.registerMap("chinaMap", cmap); let option = { geo: { type: "map", map: "chinaMap", roam: true, }, series: [ { type: "effectScatter", //带有涟漪特效动画的散点（气泡）图。利用动画特效可以将某些想要突出的数据进行视觉突出。 coordinateSystem: "geo", //使用什么坐标系geo使用地理坐标系 data, // 这个时候地图上就会有点的涟漪效果 rippleEffect: { //涟漪特效相关配置。 number: 2, //波纹的数量。 scale: 4, //动画中波纹的最大缩放比例 }, // label:{ // show:true // }, itemStyle: { color: "red", }, }, // 也可以绘制点效果 { symbolSize: 20, data: [ { name: "北京市", // 数据项名称，在这里指地区名称 value: [ // 数据项值 116.46, // 地理坐标，经度 39.92, // 地理坐标，纬度 340, // 北京地区的数值 ], }, ], type: "scatter", coordinateSystem: "geo", series坐标系类型 }, ], }; myChart.setOption(option); }, }; </script> <style scoped> #myecharts { width: 600px; height: 600px; border: 2px solid red; } </style>

当浏览器大小改变的时候 我们需要让图表一同改变 这个时候就会用到图表自适应大小

<template> <div ref="myChart"></div> </template> <script> import * as echarts from "echarts"; export default { mounted() { let myChart = echarts.init(this.$refs.myChart); let xData = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]; let option = { xAxis: { type: "category", data: xData, }, yAxis: { type: "value", }, series: [ { name: "美食", type: "line", stack: "num", data: [120, 132, 101, 134, 90, 230, 210], areaStyle: {}, emphasis: { focus: "series", }, }, { name: "日化", type: "line", stack: "num", data: [220, 182, 191, 234, 290, 330, 310], areaStyle: {}, emphasis: { focus: "series", }, }, { name: "熟食", type: "line", stack: "num", data: [150, 232, 201, 154, 190, 330, 410], areaStyle: {}, emphasis: { focus: "series", }, }, ], }; myChart.setOption(option); // 监听页面的大小 window.addEventListener("resize", () => { myChart.resize() }); }, }; </script> <style> #myChart { width: 100%; height: 500px; border: 1px solid red; } </style>

myChart.showLoading();开始等待

myChart.hideLoading();关闭等待

1.设置json-server模拟数据

（1）全局下载 npm install -g json-server

（2）新建mock文件夹 并且在其中创建json文件 设置数据

（3）终端cd到mock文件夹下 启动 json-server --watch xx.json --port 端口号

2.页面请求数据并且设置等待效果

<template> <div ref="myChart"></div> </template> <script> import * as echarts from "echarts"; import axios from "axios"; // import {mapData} from "../assets/mapData.js" export default { data() { return { echartsData: {}, }; }, methods: { // 获取json-server数据 async linkData() { let mapnum = await axios({ url: "http://localhost:3000/one" }); console.log(mapnum.data); this.echartsData = mapnum.data; }, }, mounted() { // 1.初始化 let myChart = echarts.init(this.$refs.myChart); // 设置开始等待 myChart.showLoading(); // 调用数据请求方法 this.linkData().then(() => { myChart.hideLoading(); // 2.设置echarts数据 let option = { title: { text: "饼状图", subtext: "基本设置", left: "center", //设置位置居中 }, tooltip: { trigger: "item", //触发类型item数据项图形触发 }, legend: { orient: "vertical", //图例列表的布局朝向vertical纵向 left: "left", }, series: [ { name: "销售量", type: "pie", // 设置环形图 radius: ["40%", "70%"], //饼图的半径。数组的第一项是内半径，第二项是外半径。 // 设置环形图 label: { //饼图图形上的文本标签 show: true, position: "inside", //outside饼图扇区外侧inside饼图扇区内部center在饼图中心位置 color: "yellow", }, labelLine: { //标签的视觉引导线配置 show: false, }, roseType: "area", //是否展示成南丁格尔图，通过半径区分数据大小 itemStyle: { //设置内容样式 color: "#c23531", shadowBlur: 200, shadowColor: "rgba(0, 0, 0, 0.5)", }, data: this.echartsData, }, ], }; // 4.设置图表绘制图表 myChart.setOption(option); }); }, }; </script> <style> #myChart { width: 500px; height: 500px; border: 1px solid red; } </style>

<template> <div> <h1>This is an about page</h1> <div ref="demoh"></div> </div> </template> <script> import * as echarts from "echarts"; export default { mounted() { let myChart = echarts.init(this.$refs.demoh); let xData = ["美食", "数码", "日化", "蔬菜", "熟食"]; let yData = [88, 75, 20, 210, 35]; let option = { animation:true,//是否开启动画。 animationThreshold:5,//是否开启动画的阈值，当单个系列显示的图形数量大于这个阈值时会关闭动画。 animationDuration:2000,//初始动画的时长 animationEasing:"linear",//初始动画的缓动效果。官方更多解释：https://echarts.apache.org/examples/zh/editor.html?c=line-easing animationDelay:1000,//初始动画的延迟 xAxis: { type: "value", }, yAxis: { data: xData, type: "category", }, series: [ { type: "bar", name: "销量", data: yData, barWidth: 50, itemStyle: { normal: { color: function (params) { let colorList = [ "#c23531", "#2f4554", "#61a0a8", "#d48265", "#91c7ae", ]; return colorList[params.dataIndex]; }, }, }, markPoint: { data: [ { type: "max", name: "最大值", }, { type: "min", name: "最小值", }, ], }, markLine: { data: [ { type: "average", name: "平均值", }, ], }, }, ], }; myChart.setOption(option); }, }; </script> <style scoped> #myecharts { width: 600px; height: 600px; border: 2px solid red; } </style>

ECharts 中我们可以通过监听用户的操作行为来回调对应的函数。

ECharts 通过 on 方法来监听用户的行为，例如监控用户的点击行为

<template> <div> <h1>This is an about page</h1> <div ref="demoh"></div> </div> </template> <script> import * as echarts from "echarts"; export default { mounted() { let myChart = echarts.init(this.$refs.demoh); // 事件 // ECharts 中我们可以通过监听用户的操作行为来回调对应的函数。 // ECharts 通过 on 方法来监听用户的行为，例如监控用户的点击行为。 myChart.on("click", function (params) { // 在用户点击后控制台打印数据的名称 // params对象的属性 // componentType 当前点击的图形元素所属的组件名称 // seriesType 系列类型 // seriesName 系列名称。 // name数据名，类目名 // data传入的原始数据项 // value传入的数据值 console.log(params); }); let xData = ["美食", "数码", "日化", "蔬菜", "熟食"]; let yData = [88, 75, 20, 210, 35]; let option = { xAxis: { type: "value", }, yAxis: { data: xData, type: "category", }, series: [ { type: "bar", name: "销量", data: yData, barWidth: 50, itemStyle: { normal: { color: function (params) { let colorList = [ "#c23531", "#2f4554", "#61a0a8", "#d48265", "#91c7ae", ]; return colorList[params.dataIndex]; }, }, }, markPoint: { data: [ { type: "max", name: "最大值", }, { type: "min", name: "最小值", }, ], }, markLine: { data: [ { type: "average", name: "平均值", }, ], }, }, ], }; myChart.setOption(option); }, }; </script> <style scoped> #myecharts { width: 600px; height: 600px; border: 2px solid red; } </style>

有多个图形怎么监听呢？

使用 query 只对指定的组件的图形元素的触发回调：

chart.on(eventName, query, handler);

chart.on('click', 'series', function () {...});
chart.on('click', 'series.line', function () {...});
chart.on('click', 'dataZoom', function () {...});
chart.on('click', 'xAxis.category', function () {...}); 

下面就在添加一个折线图  

<template> <div> <h1>This is an about page</h1> <div ref="demoh"></div> </div> </template> <script> import * as echarts from "echarts"; export default { mounted() { let myChart = echarts.init(this.$refs.demoh); // 事件 // ECharts 中我们可以通过监听用户的操作行为来回调对应的函数。 // ECharts 通过 on 方法来监听用户的行为，例如监控用户的点击行为。 // myChart.on("click", function (params) { // 在用户点击后控制台打印数据的名称 // params对象的属性 // componentType 当前点击的图形元素所属的组件名称 // seriesType 系列类型 // seriesName 系列名称。 // name数据名，类目名 // data传入的原始数据项 // value传入的数据值 // console.log(params); // }); // 只对折线图做出反应 // myChart.on("click", 'series.line',function (params) { // console.log(params); // }); // 只对某一项最做出反应 // 比如对折线图的数码项点击做出反应 // myChart.on("click",{name:"数码"},function (params) { // console.log(params); // }); // 但是发现折线图柱状图都可以 // 只对折线图生效 myChart.on("click",{seriesIndex: 1,name:"数码"},function (params) { console.log(params); }); let xData = ["美食", "数码", "日化", "蔬菜", "熟食"]; let yData = [88, 75, 20, 210, 35]; let option = { xAxis: { type: "value", }, yAxis: { data: xData, type: "category", }, series: [ { type: "bar", name: "销量", data: yData, barWidth: 50, itemStyle: { normal: { color: function (params) { let colorList = [ "#c23531", "#2f4554", "#61a0a8", "#d48265", "#91c7ae", ]; return colorList[params.dataIndex]; }, }, }, markPoint: { data: [ { type: "max", name: "最大值", }, { type: "min", name: "最小值", }, ], }, markLine: { data: [ { type: "average", name: "平均值", }, ], }, }, // 在添加一个折线图 { data: [150, 230, 224, 218, 135], type: "line", //设置系列为折线图 smooth: true, //是否平滑曲线显示如果是 number 类型（取值范围 0 到 1），表示平滑程度，越小表示越接近折线段，反之则反。设为 true 时相当于设为 0.5 markPoint: { //图表标注。 data: [ { type: "max", name: "Max" }, { type: "min", name: "Min" }, ], }, markLine: { //图表标线。 data: [{ type: "average", name: "Avg" }], }, }, ], }; myChart.setOption(option); }, }; </script> <style scoped> #myecharts { width: 600px; height: 600px; border: 2px solid red; } </style>