echart

CDN官网：可以查看所有插件 https://www.bootcdn.cn/ 1、在public - index.html中 2、在vue.config.js中 externals中加 echarts: "echarts" 3、在要使用的vue文件中 引入vant 1、index.html中 2、在vue.config.js中 externals中加 vant: "vant"，同上 3、在main.js中引入vant

main(){ long a; printf("input a long integer "); scanf("%ld",&a); printf("%ld",a); } 运行结果为： input a long integer 1234567890 1234567890 当输入数据改为长整型后，输入输出数据相等。

echarts X轴数据太多间隔显示，tooltip让全部显示的方法：1、不要使用默认的tooltip了，可以对应写一个label记录值，2、然后控制它的display：block/none 可以试一下，3、用一个公有的静态变量存储着这个值，4、然后触发不显示事件时，把tooltip的值清空。5、最后鼠标移动到listview时，把这个静态变量赋值给这个tooltip.就可以了。

先把ds.Tables[0].Rows[0][j].ToString()中的值赋给一个字符串，然后在让它在tooltip中显示就OK了！ 如：string str="";for(int j=0;j<ds.Tables[0].Columns.Count;j++) { str=ds.Tables[0].Rows[0][j].ToString(); }this.toolTip1.SetToolTip(this.label1,str);

遇到同样问题

改 trigger item 为 trigger axis

echarts 中自定义 tooltip 的属性是 formatter ，它是一个方法，主要是讲一下怎么将自定义的值显示在 tooltip 中，因为自己刚开始用的时候，还是查了半天的。 当未定义的时候，数据如下： tooltip 显示如下：当 hover 最后一条数据的时候，输出如下：此时再次 hover 的时候，显示就变为

只看不说

timeline:{orient:"vertical"}

var option={timeline:{data:["2013-01-01","2014-01-01","2015-01-01"],label : {formatter : function(s) {return s.slice(0, 4);}},autoPlay : true,playInterval : 1000},options:[{/**options 1 */title : {text: "2013"},

前言本文主要给大家介绍了关于vue.js将echarts封装为组件一键使用的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧。说明做项目的时候为了让数据展示的更加直观，总会用到图表相关的控件，而说到图表控件第一时间当然想到ECharts这个开源项目，而它不像iview、element-ui这些组件使用起来那么便捷，需要绕一个小弯，为了图方便于是对ECharts进行了一层封装控件演示控件使用概要 基于echarts的二次封装 由数据驱动 控件源码见src/components/charts文档props 属性 说明 类型 _id 图表唯一标识，当id重复将会报错 String _titleText 图表标题 String _xText x轴描述 String _yText y轴描述 String _chartData 图表数据 Array _type 图表类型，提供三种(LineAndBar/LineOrBar/Pie)调用示例 <chart :_id=""testCharts"" :_titleText=""访问量统计"" :_xText=""类别"" :_yText=""总访问量"" :_chartData="chartData" :_type=""Pie""></chart> //测试数据样例 [["类别1",10],["类别2",20]]实现方式创建一个待渲染的dom<template> <div :id="_id" class="chart"></div></template>绘制函数function drawPie(chartData,id,titleText,xText,yText) { var chart = echarts.init(document.getElementById(id)) var xAxisData = chartData.map(function (item) {return item[0]}) var pieData = [] chartData.forEach((v,i)=>{ pieData.push({ name:v[0], value:v[1] }) }) chart.setOption({ title : { text: titleText, subtext: "", x:"center" }, tooltip : { trigger: "item", formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { orient: "vertical", left: "left", data: xAxisData }, series : [ { name: xText, type: "pie", radius : "55%", center: ["50%", "60%"], data:pieData, itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: "rgba(0, 0, 0, 0.5)" } } } ] }) }挂载结束、数据源改变时重绘 watch:{ _chartData(val){ switch (this._type){ case "LineAndBar": drawLineAndBar(val,this._id,this._titleText,this._xText,this._yText); break case "LineOrBar": drawLineOrBar(val,this._id,this._titleText,this._xText,this._yText); break case "Pie": drawPie(val,this._id,this._titleText,this._xText,this._yText); break default: drawLineAndBar(val,this._id,this._titleText,this._xText,this._yText); break } } }, mounted() { switch (this._type){ case "LineAndBar": drawLineAndBar(this._chartData,this._id,this._titleText,this._xText,this._yText); break case "LineOrBar": drawLineOrBar(this._chartData,this._id,this._titleText,this._xText,this._yText); break case "Pie": drawPie(this._chartData,this._id,this._titleText,this._xText,this._yText); break default: drawLineAndBar(this._chartData,this._id,this._titleText,this._xText,this._yText); break } }总结

Chart.Aspect(外观属性) WebChart1.TempChart = Steema.TeeChart.Web.TempChartStyle.Session; WebChart1.GetChartFile = "GetChart.aspx"; chart1.Header.Text = "饼图"; //是否显示图例 chart1.Legend.Visible = false; Steema.TeeChart.Styles.Pie pie1 = new Steema.TeeChart.Styles.Pie(); Steema.TeeChart.Styles.Pie pie2 = new Steema.TeeChart.Styles.Pie(); Steema.TeeChart.Styles.Pie pie3 = new Steema.TeeChart.Styles.Pie(); chart1.Series.Add(pie1); chart1.Series.Add(pie2); chart1.Series.Add(pie3); //WebChart1.Chart.ChartRect = new Rectangle(10, 10, 10, 10); chart1.Series[0].Add(1, 120); chart1.Series[0].Add(2, 320); //pie1.BeforeDrawValues += new PaintChartEventHandler(pie1_BeforeDrawValues); chart1.Series[1].Add(1, 120); chart1.Series[1].Add(2, 320); chart1.Series[1].Add(3, 420); chart1.Series[1].Add(4, 220); //pie2.BeforeDrawValues += new PaintChartEventHandler(pie2_BeforeDrawValues); chart1.Series[2].Add(1, 120); chart1.Series[2].Add(2, 320); chart1.Series[2].Add(3, 420); chart1.Series[2].Add(4, 220); for (int i = 0; i < 3; i++) { //显示标注 chart1.Series[i].Marks.Visible = true; } } 或者固定显示位置： void pie2_BeforeDrawValues(object sender, Steema.TeeChart.Drawing.Graphics3D g) { WebChart1.Chart.ChartRect = new Rectangle(WebChart1.Chart.Width / 2, 10, WebChart1.Chart.Width / 2 - 20, WebChart1.Chart.Height / 2 - 20); } void pie1_BeforeDrawValues(object sender, Steema.TeeChart.Drawing.Graphics3D g) { WebChart1.Chart.ChartRect = new Rectangle(10, 10, WebChart1.Chart.Width / 2 - 20, WebChart1.Chart.Height / 2 - 20); }

是jFreeChart吧？ 这是Struts中结合 jFreeChart 画3种图，是我自己一个项目用到的 你自己看看吧 其中为生成List数据 我是在数据库用取出来的 jFreeChart 的接受数据应该是 类似于二维数组型的 这个网上有介绍 public String chartDB() { if (style.equals("饼图")) { drawPieChart(); } else if (style.equals("垂直柱状统计图")) { drawBarChart(); } else if (style.equals("折线统计图")) { drawLineChart(); } return SUCCESS; } private void drawLineChart() { Map<String, Object> session = ActionContext.getContext().getSession(); recordids = (String[]) session.get("recordids"); String[] field = new String[word.length]; // 获得要查询的字段 String[] rowKeys = new String[word.length]; // 各字段的中文名称 for (int i = 0; i < word.length; i++) { field[i] = word[i].split("-")[0]; rowKeys[i] = word[i].split("-")[1]; } StringBuffer sb = new StringBuffer("SELECT "); for (int j = 0; j < field.length; j++) { sb.append("sum(" + field[j] + "), "); } sb .append("DATE_FORMAT(bas_datestart,"%Y-%m") from disasterrecord where bas_recordid in " + Util.typesToString(recordids) + " group by DATE_FORMAT(bas_datestart,"%Y-%m")"); List<Object[]> list = new SearchService().findBySql(sb.toString()); DefaultCategoryDataset dataSet = new DefaultCategoryDataset(); String[] category = new String[list.size()]; for (int k = 0; k < field.length; k++) { for (int j = 0; j < list.size(); j++) { if(list.get(j)[field.length]==null){ category[j] = ""; }else{ category[j] = list.get(j)[field.length].toString(); } if(list.get(j)[k] ==null){ dataSet.addValue(new Double(0), rowKeys[k], category[j]); }else{ dataSet.addValue(new Double(list.get(j)[k].toString()), rowKeys[k], category[j]); } } } chart = ChartFactory.createLineChart(title, xname, yname, dataSet, PlotOrientation.VERTICAL, true, true, false); chart.getTitle().setFont(new Font("宋体", Font.BOLD, 15)); chart.getLegend().setItemFont(new Font("黑体", Font.BOLD, 15)); CategoryPlot plot = (CategoryPlot) chart.getPlot(); CategoryAxis domainAxis = plot.getDomainAxis(); /*------设置X轴坐标上的文字-----------*/ domainAxis.setTickLabelFont(new Font("黑体", Font.PLAIN, 11)); /*------设置X轴的标题文字------------*/ domainAxis.setLabelFont(new Font("宋体", Font.PLAIN, 12)); NumberAxis numberaxis = (NumberAxis) plot.getRangeAxis(); /*------设置Y轴坐标上的文字-----------*/ numberaxis.setTickLabelFont(new Font("黑体", Font.PLAIN, 12)); /*------设置Y轴的标题文字------------*/ numberaxis.setLabelFont(new Font("黑体", Font.PLAIN, 12)); } private void drawBarChart() { Map<String, Object> session = ActionContext.getContext().getSession(); recordids = (String[]) session.get("recordids"); String[] field = new String[word.length]; // 获得要查询的字段 String[] rowKeys = new String[word.length]; // 各字段的中文名称 for (int i = 0; i < word.length; i++) { field[i] = word[i].split("-")[0]; rowKeys[i] = word[i].split("-")[1]; } StringBuffer sb = new StringBuffer("SELECT "); if (type.equals("各地区各灾害")) { for (int j = 0; j < field.length; j++) { sb.append("sum(" + field[j] + "), "); } sb .append(" bas_cityarea from disasterrecord where bas_recordid in " + Util.typesToString(recordids) + " group by bas_cityarea"); } else { for (int j = 0; j < field.length; j++) { sb.append("sum(" + field[j] + "), "); } sb .append("Year(bas_datestart) from disasterrecord where bas_recordid in " + Util.typesToString(recordids) + " group by Year(bas_datestart)"); } List<Object[]> list = new SearchService().findBySql(sb.toString()); String[] columnKeys = new String[list.size()]; // 获得 各地区名 或者 年份 for (int k = 0; k < list.size(); k++) { columnKeys[k] = list.get(k)[field.length].toString(); } double[][] data = new double[rowKeys.length][columnKeys.length]; for (int m = 0; m < rowKeys.length; m++) { for (int n = 0; n < columnKeys.length; n++) { if (list.get(n)[m] == null) { data[m][n] = new Double(0); } else { data[m][n] = new Double(list.get(n)[m].toString()); } } } CategoryDataset dataset = DatasetUtilities.createCategoryDataset( rowKeys, columnKeys, data); chart = ChartFactory.createBarChart3D(title, xname, yname, dataset, PlotOrientation.VERTICAL, true, true, false); CategoryPlot plot = chart.getCategoryPlot();// 获取图表区域对象 CategoryAxis domainAxis = plot.getDomainAxis(); // 水平底部列表 domainAxis.setLabelFont(new Font("黑体", Font.BOLD, 14)); // 水平底部标题 domainAxis.setTickLabelFont(new Font("宋体", Font.BOLD, 12)); // 垂直标题 ValueAxis rangeAxis = plot.getRangeAxis();// 获取柱状 rangeAxis.setLabelFont(new Font("黑体", Font.BOLD, 15)); TextTitle textTitle = chart.getTitle(); textTitle.setFont(new Font("黑体", Font.BOLD, 15)); BarRenderer3D renderer = new BarRenderer3D(); renderer.setBaseItemLabelGenerator(new StandardCategoryItemLabelGenerator()); renderer.setBaseItemLabelsVisible(true); renderer.setBasePositiveItemLabelPosition(new ItemLabelPosition(ItemLabelAnchor.OUTSIDE12, TextAnchor.BASELINE_LEFT)); renderer.setItemLabelAnchorOffset(10D); renderer.setItemLabelFont(new Font("宋体", Font.PLAIN, 12)); renderer.setItemLabelsVisible(true); //设置每个地区所包含的平行柱的之间距离 //renderer.setItemMargin(0.3); plot.setRenderer(renderer); chart.getLegend().setItemFont(new Font("黑体", Font.BOLD, 15)); } public void drawPieChart() { Map<String, Object> session = ActionContext.getContext().getSession(); recordids = (String[]) session.get("recordids"); String sql = ""; String field[] = word[0].split("-"); if (type.equals("各地区各灾害")) { sql = "SELECT sum(" + field[0] + ") +"", bas_cityarea from disasterrecord where bas_recordid in " + Util.typesToString(recordids) + " group by bas_cityarea"; } else { sql = "SELECT sum(" + field[0] + ") +"", Year(bas_datestart) from disasterrecord where bas_recordid in " + Util.typesToString(recordids) + " group by Year(bas_datestart)"; } List<Object[]> list = new SearchService().findBySql(sql); DefaultPieDataset data = new DefaultPieDataset(); for (Object[] o : list) { if(o[0] == null){ data.setValue(o[1].toString(), new Double(0)); } data.setValue(o[1].toString(), new Double(o[0].toString())); } chart = ChartFactory.createPieChart(title, data, true, true, false); Font font = new Font("SimSun", 10, 20); TextTitle txtTitle = null; txtTitle = chart.getTitle(); txtTitle.setFont(font); PiePlot pieplot = (PiePlot)chart.getPlot(); pieplot.setLabelFont(font); chart.getLegend().setItemFont(font); }

有没有字符过滤器，设置统一

查看一些接口的用处，或者直接查看jfreechart中自带的demo，应该比较容易。剩下的要看LZ自己了。

import javax.swing.*; import org.jfree.chart.ChartFactory;import org.jfree.chart.ChartPanel;import org.jfree.chart.JFreeChart;import org.jfree.chart.plot.PiePlot;import org.jfree.data.general.DefaultPieDataset;import org.jfree.data.general.PieDataset;import java.awt.*; public class Test { public static void main(String [] args){ JFrame frame = new JFrame(); frame.setSize(new Dimension(800,800)); frame.setLocation(10,10); frame.setLayout(new FlowLayout()); JPanel p1=new JPanel(); JPanel p2=new JPanel(); //把Jbutton替换为你的饼图应该就可以了。 //JButton b1=new JButton("JPanel1"); //饼图1 JFreeChart chart = createChart(createDataset()); // JButton b2=new JButton("JPanel2"); ChartPanel localChartPanel = new ChartPanel(chart, false); //饼图2 JFreeChart chart2 = createChart(createDataset()); ChartPanel localChartPanel2 = new ChartPanel(chart2, false); p1.add(localChartPanel); //p1.add(b1); p2.add(localChartPanel2); frame.add(p1, FlowLayout.LEFT); frame.add(p2, FlowLayout.CENTER); //在设置frame为显示状态 frame.setVisible(true); } /** * Creates a sample dataset. * * @return A sample dataset. */ private static PieDataset createDataset() { DefaultPieDataset dataset = new DefaultPieDataset(); dataset.setValue("One", new Double(43.2)); dataset.setValue("Two", new Double(10.0)); dataset.setValue("Three", new Double(27.5)); dataset.setValue("Four", new Double(17.5)); dataset.setValue("Five", new Double(11.0)); dataset.setValue("Six", new Double(19.4)); return dataset; } /** * Creates a chart. * * @param dataset the dataset. * * @return A chart. */ private static JFreeChart createChart(PieDataset dataset) { JFreeChart chart = ChartFactory.createPieChart( "Pie Chart Demo 1", // chart title dataset, // data true, // include legend true, false ); PiePlot plot = (PiePlot) chart.getPlot(); plot.setSectionOutlinesVisible(false); plot.setLabelFont(new Font("SansSerif", Font.PLAIN, 12)); plot.setNoDataMessage("No data available"); plot.setCircular(false); plot.setLabelGap(0.02); return chart; }}ChartPanel的父类就是JPanel。和JButton一样都是Component对象面板里面是可以嵌套面板的。希望对你有帮助。上面的例子是可以直接跑起来的

图片中红色框起来的按钮2、代码[javascript] view plain copy selfButtons:{//自定义按钮 danielinbiti,这里增加，selfbuttons可以随便取名字 show:true,//是否显示 title:"自定义", //鼠标移动上去显示的文字 icon:"test.png", //图标 option:{}, onclick:function(option1) {//点击事件,这里的option1是chart的option信息 alert("1");//这里可以加入自己的处理代码，切换不同的图形 } } 在toolbox中的位置[javascript] view plain copytoolbox: { show : true, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, magicType : {show: true, type: ["line", "bar"]}, restore : {show: true}, selfButtons:{//自定义按钮 danielinbiti,这里增加，selfbuttons可以随便取名字 show:true,//是否显示 title:"自定义", //鼠标移动上去显示的文字 icon:"test.png", //图标 option:{}, onclick:function(option1) {//点击事件,这里的option1是chart的option信息 alert("1");//这里可以加入自己的处理代码，切换不同的图形 } }, saveAsImage : {show: true} } } 当然，内置了很多图标，这些图标都是画出来的。[javascript] view plain copy iconLibrary: { mark: _iconMark, markUndo: _iconMarkUndo, markClear: _iconMarkClear, dataZoom: _iconDataZoom, dataZoomReset: _iconDataZoomReset, restore: _iconRestore, lineChart: _iconLineChart, barChart: _iconBarChart, pieChart: _iconPieChart, funnelChart: _iconFunnelChart, forceChart: _iconForceChart, chordChart: _iconChordChart, stackChart: _iconStackChart, tiledChart: _iconTiledChart, dataView: _iconDataView, saveAsImage: _iconSave, cross: _iconCross, circle: _iconCircle, rectangle: _iconRectangle, triangle: _iconTriangle, diamond: _iconDiamond, arrow: _iconArrow, star: _iconStar, heart: _iconHeart, droplet: _iconDroplet, pin: _iconPin, image: _iconImage } 带chart后缀的都放在magicType的type中，同时后缀chart不用，程序里会自动拼接，比如lineChart，写"line"

可以自定义图片[javascript] view plain copy selfButtons:{//自定义按钮 danielinbiti,这里增加，selfbuttons可以随便取名字show:true,//是否显示title:"自定义", //鼠标移动上去显示的文字icon:"test.png", //图标option:{},onclick:function(option1) {//点击事件,这里的option1是chart的option信息alert("1");//这里可以加入自己的处理代码，切换不同的图形}} 在toolbox中的位置[javascript] view plain copytoolbox: {show : true,feature : {mark : {show: true},dataView : {show: true, readOnly: false},magicType : {show: true, type: ["line", "bar"]},restore : {show: true},selfButtons:{//自定义按钮 danielinbiti,这里增加，selfbuttons可以随便取名字show:true,//是否显示title:"自定义", //鼠标移动上去显示的文字icon:"test.png", //图标option:{},onclick:function(option1) {//点击事件,这里的option1是chart的option信息alert("1");//这里可以加入自己的处理代码，切换不同的图形}},saveAsImage : {show: true}}} 当然，内置了很多图标，这些图标都是画出来的。[javascript] view plain copy iconLibrary: {mark: _iconMark,markUndo: _iconMarkUndo,markClear: _iconMarkClear,dataZoom: _iconDataZoom,dataZoomReset: _iconDataZoomReset,restore: _iconRestore,lineChart: _iconLineChart,barChart: _iconBarChart,pieChart: _iconPieChart,funnelChart: _iconFunnelChart,forceChart: _iconForceChart,chordChart: _iconChordChart,stackChart: _iconStackChart,tiledChart: _iconTiledChart,dataView: _iconDataView,saveAsImage: _iconSave,cross: _iconCross,circle: _iconCircle,rectangle: _iconRectangle,triangle: _iconTriangle,diamond: _iconDiamond,arrow: _iconArrow,star: _iconStar,heart: _iconHeart,droplet: _iconDroplet,pin: _iconPin,image: _iconImage} 带chart后缀的都放在magicType的type中，同时后缀chart不用，程序里会自动拼接，比如lineChart，写"line"

我试了一下，piechart生成正常的，楼主看不到可能只不过没有输出而已。和bar图一样在jsp里ChartFacotory生成chart后，添上向response里输出pie图字节流的语句即可：ChartUtilities.writeChartAsPNG(response.getOutputStream(),chart,500,300);

图片中红色框起来的按钮2、代码[javascript] view plain copy selfButtons:{//自定义按钮 danielinbiti,这里增加，selfbuttons可以随便取名字show:true,//是否显示title:"自定义", //鼠标移动上去显示的文字icon:"test.png", //图标option:{},onclick:function(option1) {//点击事件,这里的option1是chart的option信息alert("1");//这里可以加入自己的处理代码，切换不同的图形}} 在toolbox中的位置[javascript] view plain copytoolbox: {show : true,feature : {mark : {show: true},dataView : {show: true, readOnly: false},magicType : {show: true, type: ["line", "bar"]},restore : {show: true},selfButtons:{//自定义按钮 danielinbiti,这里增加，selfbuttons可以随便取名字show:true,//是否显示title:"自定义", //鼠标移动上去显示的文字icon:"test.png", //图标option:{},onclick:function(option1) {//点击事件,这里的option1是chart的option信息alert("1");//这里可以加入自己的处理代码，切换不同的图形}},saveAsImage : {show: true}}} 当然，内置了很多图标，这些图标都是画出来的。[javascript] view plain copy iconLibrary: {mark: _iconMark,markUndo: _iconMarkUndo,markClear: _iconMarkClear,dataZoom: _iconDataZoom,dataZoomReset: _iconDataZoomReset,restore: _iconRestore,lineChart: _iconLineChart,barChart: _iconBarChart,pieChart: _iconPieChart,funnelChart: _iconFunnelChart,forceChart: _iconForceChart,chordChart: _iconChordChart,stackChart: _iconStackChart,tiledChart: _iconTiledChart,dataView: _iconDataView,saveAsImage: _iconSave,cross: _iconCross,circle: _iconCircle,rectangle: _iconRectangle,triangle: _iconTriangle,diamond: _iconDiamond,arrow: _iconArrow,star: _iconStar,heart: _iconHeart,droplet: _iconDroplet,pin: _iconPin,image: _iconImage} 带chart后缀的都放在magicType的type中，同时后缀chart不用，程序里会自动拼接，比如lineChart，写"line"

createMultiplePieChart这个方法生成的多个图是可以布局的，但是他是你dataset.addValue（）有几个他就生成几个图。而且都是一样的。 用java图形用户界面来做那就用java的布局管理器类来做如下： JPanel panel = new JPanel(new GridLayout(2, 2)); //new GridLayout(2, 2)网格型的布局处理器，就是把容器被分成大小相等的矩形，一个矩形中放置一个组件。这是个2行*2列的布局 DefaultCategoryDataset dataset=new DefaultCategoryDataset(); dataset.addValue(23.3, "Section 1", "Section"); dataset.addValue(56.5, "Section 2", "Section"); dataset.addValue(43.3, "Section 3", "Section"); dataset.addValue(11.1, "Section 4", "Section"); JFreeChart chart1 = ChartFactory.createMultiplePieChart("Multiple Pie Chart", dataset,TableOrder.BY_ROW, true,true, false ); panel.add(new ChartPanel(chart1)); panel.setPreferredSize(new Dimension(800, 600));//设置整个画布的大小 这样你生成的图就会是2行*2列的，要其他的只要改new GridLayout(2, 2)这个就好了。还有其他多种布局方式，如FlowLayout,BorderLayout

这个好难啊。你们谁知道吗

想问问楼主现在解决了这个问题了么，现在我也在用这个问题，很苦恼，不知道该怎么搞

1. 先打开你的EXCEL程式，开一版新的页面。 图片参考：imgcld.yimg/8/n/HA00279681/o/701108020023513873436040 2. 在第1列A栏填写你的标题，并在第1列B栏填上其百分比。填写好以后，按上面选项列的『插入』=＞『图表（点击倒三角形）』=＞『圆形图（点击倒三角形）』=＞『子母圆形图』。 图片参考：imgcld.yimg/8/n/HA00279681/o/701108020023513873436041 3. 右键点击子母圆形图点击『新增资料标签』就可以显示其百分比。 图片参考：imgcld.yimg/8/n/HA00279681/o/701108020023513873436052 4. 像刚才一样按上面选项列的『插入』=＞『图表（点击倒三角形）』=＞『圆形图（点击倒三角形）』=＞『图形图带有子横形图』。 图片参考：imgcld.yimg/8/n/HA00279681/o/701108020023513873436063 5. 最后完成品。 图片参考：imgcld.yimg/8/n/HA00279681/o/701108020023513873436064 P.S. 所有百分比都必须基于100%来执行，如没有其他可根据的资料，当欠缺一定百分比可以『其他』来取代。 EXCEL(2010version) 系咩？

意思不同。piechart指饼图，而chart指图表。两者意思是不一样的，根据意思进行区分。

pie chart：n.圆形统计图；饼分图； 例如：The pie chart is divided into two sections: Covered and Not Covered. 扩展资料 　　Shows a pie chart with the percentages of the test results that passed and failed. 　　显示一个带有通过与失败测试结果百分比的饼状图。 　　Drag to add a customizable pie chart to your drawing page. 　　拖动可将可自定义的.饼图添加到您的绘图页中。 　　For example, a number of statistical data can be showed by the pie chart, histogram. 　　如一批统计数据可以分别用饼图、柱状图表示。

下面是echats作地图数据可视化的一些简单的例子，需要更多的功能，可以自己在配置中添加。 下面直接放demo: 效果图： 2、在地图上作散点图 在这里series的数据格式为： {name:"广州",value:[113.480637,23.125178,453088]} 所以要对数据进行一定的处理。

在 Vue 中，子组件向父组件传值可以通过自定义事件和父组件监听子组件触发的事件来实现。下面是一个示例，展示了子组件向父组件传递数据的方法：父组件：```vue<template><div><h1>父组件</h1><p>子组件传递的值: {{ childData }}</p><ChildComponent @childEvent="handleChildEvent" /></div></template><script>import ChildComponent from "./ChildComponent.vue";export default {components: {ChildComponent},data() {return {childData: ""};},methods: {handleChildEvent(data) {this.childData = data;}}}</script>```子组件：```vue<template><div><h2>子组件</h2><button @click="sendData">传递数据给父组件</button></div></template><script>export default {methods: {sendData() {const data = "Hello, Parent!";this.$emit("childEvent", data);}}}</script>```在上述示例中，父组件通过在子组件标签上使用 `@childEvent` 监听自定义事件 `childEvent`，并在触发时调用 `handleChildEvent` 方法来接收传递的数据。子组件在按钮的点击事件中，通过 `this.$emit("childEvent", data)` 来触发自定义事件，并传递数据给父组件。当子组件触发自定义事件时，父组件的 `handleChildEvent` 方法会被调用，并将子组件传递的数据赋值给 `childData` 数据属性。父组件可以在模板中直接使用 `childData` 来显示子组件传递的值。通过这种方式，子组件可以将数据传递给父组件，实现组件间的通信。

初学echarts，也碰到同样的问题，加载了echarts.js文件，但是demo的图示在浏览器里没有显示，后来捣鼓了半天发现原来是js文件有问题。建议换一个echarts JS文件试一试。

兄弟我为你解决这个问题写了个博客，能简单知道你快速上手和处理，你可以看看网页链接

为了更好的讲解如何使用这个图形渲染插件，我会通过创建一个解决方案的形式一点点给大家讲解清楚。1. EChart最新的文档目录。首先创建一个解决方案，目录如下：之前的一篇文章中讲到如果要使用Echarts还要下载相关的ZRender的渲染包，最新的版本已经将这些合并在一起了，只需要引用图中红框标注的echarts文件夹下的文件即可。各文件的作用如下：l Echarts-map.js :主要用来渲染跟地图相关l Echarts.js :基本的常规图形相关l Esl.js :图像引擎Statics文件夹下的ECharts.js文件，为我自己抽象总结出来的用于Echarts的配置文件加载、数据处理、初始化各种图像类型的配置、图像渲染的一些方法。2. 抽象之后的Echarts。根据Echarts官网的讲解，我把Echarts的使用归结为一下的几个步骤，同时这些步骤相应的实现对应到Statics文件夹下的Echarts.js，该文件的主要代码目录如下：123456789101112131415Var ECharts={ChartConfig:function(container,option){ …..},//加载Echarts配置文件ChartDataFormate:{….},//数据格式化ChartOptionTemplates:{….},//初始化常用的图表类型Charts:{ RenderChart:function(option){….},//渲染图表RenderMap:function(option){…}//渲染地图}}；2.1 Echarts配置文件的引入在开始使用时，首先需要引入Echarts 的配置文件，也就是要加载基本的图像类型，我们可以在每一个页面都引入，但是这样抽象化程度不高，重复使用率也不高，只需要有一个配置项在每次引用的时候加载一下即可，对应到具体的代码实现，如下：1234567891011121314151617181920212223242526272829303132333435363738394041ChartConfig: function (container, option) { //container:为页面要渲染图表的容器，option为已经初始化好的图表类型的option配置var chart_path = "/Statics/echarts/echarts"; //配置图表请求路径var map_path = "/Statics/echarts/echarts-map";//配置地图的请求路径require.config({//引入常用的图表类型的配置paths: {echarts: chart_path,"echarts/chart/bar": chart_path,"echarts/chart/pie": chart_path,"echarts/chart/line": chart_path,"echarts/chart/k": chart_path,"echarts/chart/scatter": chart_path,"echarts/chart/radar": chart_path,"echarts/chart/chord": chart_path,"echarts/chart/force": chart_path,"echarts/chart/map": map_path}});this.option = { chart: {}, option: option, container: container };return this.option;}2.2 数据格式化为了能够更好的展现各种的数据，在进行图表的option配置之前，需要先对从后台请求过来的数据进行格式化。后台返回的数据必须是json格式的数据，且数据类型只能为以下两种类型:Result1=[{name:XXX,value:XXX},{name:XXX,value:XXX}….]Result2=[{name:XXX,group:XXX,value:XXX},{name:XXX,group:XXX,value:XXX]具体的代码实现如下：+ View Code12.3 各种图表类型的配置初始化在通过2.2步骤将从后台获得的数据进行初始化之后，我们就可以进行图表的option的配置了，在这里我主要对常用的饼图、柱图（单一、分组、堆积柱图）、折线图（分组、堆积折线图）、柱图+折线（增幅）图、中国地图等图进行了配置项的初始化。具体实现如下：+ View Code

参演电影质量不好。bryandechart中文名是布莱恩德恰特（BryanDechart），1987年3月17日出生于美国犹他州盐湖城，美国男演员。2012年，出演了ABC家庭频道喜剧《设计人生》。2014年，客串了《真爱如血》。2018年，为PS4独占游戏《底特律：变人》的康纳进行动作捕捉与配音，但因为其参演的电影《设计人生》和《真爱如血》质量很差，所以导致很多人都不认识他，也就火不起来。

1.方法一 在宽度有限，数据偏多的情况下，我们会遇到第一个和最后一个数据溢出问题，针对这个问题官方文档给出的解决方法是使X轴数据倾斜显示。 效果如图所示： 2.方法二：使用formatter函数，你可以自定义文字竖向排列或者更多格式 ①使用formatter判断文字显示布局，在这你可以利用它显示个性化数据 效果如图所示： ②使用formatter使文字竖向排列,不太适合文字过长的，因为高度撑开折线图显示不美观 效果如图所示： 3.使用boundaryGap设置，此方法会有留白，有强迫症的慎用 效果如图所示：

官方文档里面好像没有这个API默认的tooltip不是canvas而是div;所以直接在formatter里面添加span设置好颜色就可以了tooltip: {trigger: "axis",formatter: "<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#ff6f0b"></span>}

tooltip: { trigger: "axis", // formatter: "{b0} " + // "{a0}:{c0} " + // "{a1}:{c1} " + // "{a2}:{c2}% " // 显示百分比 formatter: function (params) { let tip = ""; if(params != null && params.length > 0) { for(let i =0; i < params.length; i++) { tip += params[i].seriesName + ":" + params[i].value + "</br>" if(i == 2) { tip = params[0].seriesName + ":" + params[0].value + "</br>" + params[1].seriesName + ":" + params[1].value + "</br>" + params[2].seriesName + ":" + params[2].value + "%</br>" } } } return tip; }, },

option = { tooltip : { // Option config. Can be overwrited by series or data trigger: "axis", //show: true, //default true showDelay: 0, hideDelay: 50, transitionDuration:0, backgroundColor : "rgba(255,0,255,0.7)", borderColor : "#f50", borderRadius : 8, borderWidth: 2, padding: 10, // [5, 10, 15, 20] position : function(p) { // 位置回调 // console.log && console.log(p); return [p[0] + 10, p[1] - 10]; }, textStyle : { color: "yellow", decoration: "none", fontFamily: "Verdana, sans-serif", fontSize: 15, fontStyle: "italic", fontWeight: "bold" }, formatter: function (params,ticket,callback) { console.log(params) var res = "Function formatter : <br/>" + params[0].name; for (var i = 0, l = params.length; i < l; i++) { res += "<br/>" + params[i].seriesName + " : " + params[i].value; } setTimeout(function (){ // 仅为了模拟异步回调 callback(ticket, res); }, 1000) return "loading"; } //formatter: "Template formatter: <br/>{b}<br/>{a}:{c}<br/>{a1}:{c1}" }, toolbox: { show : true, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, magicType : {show: true, type: ["line", "bar", "stack", "tiled"]}, restore : {show: true}, saveAsImage : {show: true} } }, calculable : true, xAxis : { data : ["周一","周二","周三","周四","周五","周六","周日"] }, yAxis : { type : "value" }, series : [ { name:"坐标轴触发1", type:"bar", data:[ {value:320, extra:"Hello~"}, 332, 301, 334, 390, 330, 320 ] }, { name:"坐标轴触发2", type:"bar", data:[862, 1018, 964, 1026, 1679, 1600, 157] }, { name:"数据项触发1", type:"bar", tooltip : { // Series config. trigger: "item", backgroundColor: "black", position : [0, 0], formatter: "Series formatter: <br/>{a}<br/>{b}:{c}" }, stack: "数据项", data:[ 120, 132, { value: 301, itemStyle: {normal: {color: "red"}}, tooltip : { // Data config. backgroundColor: "blue", formatter: "Data formatter: <br/>{a}<br/>{b}:{c}" } }, 134, 90, { value: 230, tooltip: {show: false} }, 210 ] }, { name:"数据项触发2", type:"bar", tooltip : { show : false, trigger: "item" }, stack: "数据项", data:[150, 232, 201, 154, 190, 330, 410] } ]};

return `` 是个啥，你在F12里看看控制台里有没有错误，另外echarts记得用最新版本。

官方文档里面好像没有这个API默认的tooltip不是canvas而是div;所以直接在formatter里面添加span设置好颜色就可以了tooltip: { trigger: "axis", formatter: "<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#ff6f0b"></span> }

官方文档里面好像没有这个API默认的tooltip不是canvas而是div;所以直接在formatter里面添加span设置好颜色就可以了tooltip: { trigger: "axis", formatter: "<span style="

formatter: function (params) { for (var i = 0, l = option.xAxis[0].data.length; i < l; i++) { if (option.xAxis[0].data[i] == params.name) { return option.series[0].data[i] + params.value; } } } formatter: function (params)

formatter: function (params) {for (var i = 0, l = option.xAxis[0].data.length; i < l; i++) {if (option.xAxis[0].data[i] == params.name) {return option.series[0].data[i] + params.value;}}}formatter: function (params){return params[0].name + "<br/>"+ params[0].seriesName + " : " + params[0].value + "<br/>"+ params[1].seriesName + " : " + (params[1].value);}formatter可以用在很多地方，里面是不同的参数，具体情况，得看你用在哪里

唉

可以有左边和右边两条Y轴

Echarts是百度的javascript图表工具，在Web上通过后台提供数据（数据必须格式化好）生成图表（0成本）。帆软报表需要购买，但是绘图更加简单，类似excel绘图，在制作的时候随时可以看到效果，数据处理也类似excel，更加简单。数据关联和钻取很棒。如果大量数据需要分析处理，成本可以接受的话，最好使用帆软报表。

我猜是这样：他们把坐标做了加密，这个加密是编码层次的加密，什么UTF8啊，什么GBK啊，坐标可以转换成这些编码吧，然后后面的encodeoffsets应该就是编码的修正值，或者叫偏移值，把原来的编码改变了，这样一般人打开之后，不管是按utf8还是gbk都看不到正确的坐标了，但是echarts自己调用的时候，会根据这些offsets还原出正确的编码，所以坐标就能读出来了。这是我的理解。

6.0可以用这个啊

代码如下：myChart.on("click", function (param) { var hz = param.name;//横坐标的值 alert(param); }

可以通过样式来设置：你可先给你的按钮设置一个class,比如：class="btn"；方法有3种：1.如果有你外链样式表你可以在样式表征.btn{ width:200px; height:50px;}2.如果没有连接你直接上头部加上<style type="text/css">.btn{ width:200px; height:50px;}</style>3.你可以直接在按钮上加比如：<button style="width:200px;height:50px;">按钮</button>

wordwrap属性设置为.T.另外label要足够高，否则多行也显示不出来。你设置wordwrap属性无用，估计是没有将label的height属性调大，请根据需要调大测试。正常情况下按上述设置即可多行显示内容。也可以编程控制换行，只需在换行处加chr(13)即可。

markline下面的属性data : [ [ {name: "标线1起点", value: 100, x: 50, y: 20}, {name: "标线1终点", x: 150, y: 120} ], [ {name: "标线2起点", value: 200, x: 30, y: 80}, {name: "标线2终点", x: 270, y: 190} ], ...]

Echarts是前端的图表，百度上有Demo的，只要从后台向前台传递json数据，解析下绑定到Echarts上，即可显示效果。 步骤： 后台取到数据，转化为json； 前台获取到json，改写Echarts调用的js；

1.点击iPhone“设置”按钮;2.进入“通用”--“电量”;3.进入电量设置之后，我们往下拉就可以找到有“电池百分比”设置选项，将其开关打开，即可实现iPhone电池百分比显示了;

首先你需要有后台数据 这个不用我说吧其实echart的数据结构模式都是固定的，你只要研究下你需要的图形的例子的数据代码模式，根据情况往上套就行当然 你不要看echart的配置文档 按照他说的来引用总之挺简单的 基本的JS会就行

tooltip的话看官方formatter！然后可以参考一下代码：`tooltip:{trigger:"axis",foramtter:function(params){console.log(params)这里处理你想要的数据最后 return......;}}`echarts series的data支持数组对象格式（[{},{},{}]）,把你先要显示的都传进去不要占用value(这个是你折线的值） 然后看你formatter里console的东西就可以了

echarts控制圆饼图的大小代码及方法如下：1、新建静态页面pie.html，并引入echarts核心js文件。2、在<body></body>元素内插入div饼图容器，设置其宽度和高度。3、编写生成饼图图形的核心代码，有数据源和样式。4、预览该静态页面，查看饼图效果，分别点击饼图块。5、添加饼图块图例切换事件，并打印出饼图参数，更改参数值即可实现圆饼图大小的控制。6、再次预览该界面，可以查看到饼图效果，并点击饼图分块。

怎么会有这种问题echart渲染之前就要先有dom 后续进行重绘等操作

var ecConfig = require(‘echarts/config‘);2 myChart.on(ecConfig.EVENT.HOVER, function (param){3 var selected = param.name;4 //write your code here5 //console.log(selected);打印参数6 //hoverin();调用自定义函数7 //document.getElementById(‘wrong-message‘).innerHTML = str;8 });

我也出现这个问题了请问您解决了吗

markline下面的属性data : [[{name: "标线1起点", value: 100, x: 50, y: 20},{name: "标线1终点", x: 150, y: 120}],[{name: "标线2起点", value: 200, x: 30, y: 80},{name: "标线2终点", x: 270, y: 190}],]

在echart2.0中可以很简单的实现折线图的转折点闪烁效果，只要在series中数据添加markPoint:{symbol:"emptyCircle", effect:{show:true}}即可，但是在echart3.0中由于effect关键字在折线图中已经去掉了，所以实现起来比较复杂。大概思路是在series中再多增加几个effectScatter数据，然后重写legend点击事件，提示formatter等等。

可以通过barWidth属性设置柱子的宽度。例子如下： series : [ { name:"蒸发量", type:"bar", barWidth : 10, data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3] } ]

导入

调用时，要在页面dom渲染完毕后(可以通过this.$nextTick(()) => {}进行确认)，再进行渲染echarts。不然会报错，因为在还没有结构的时候，就扫描了该结构 解决echart重新渲染图表，遗留之前图表内容的问题方法 清空一下结构，重新渲染即可 this.myChartLed.clear(); this.myChartLed.setOption(option);

前言：echart没有滚动条概念，有配置选项类似滚动条，通过手段模拟滚动条效果....省略很多字（难） dataZoom配置官网链接： https://echarts.apache.org/zh/option.html#dataZoom 效果图，有滚动条和无滚动条

当然可以制作。EChart是封装好的JS，因其非可视化操作，需要操作者对JS语言有一定的基础。所以对于没有基础、没有接触过的人来说，EChart比OFFICE难以学会掌握。同时，你要达到的效果图，用OFFICE很轻易就能做出来。供参考

一、click事件 1、使用场景 u200b 比如点击图表时需要获取点击的图数据的时候 2、语法 二、.getZr() click事件 1、使用场景 u200b 点击的时候需要知道点击的位置，比如点击后需要再点击的地方出现一个弹框，而且需要显示点击的图的数据，这时候结合图表click事件使用 2、语法

这种需要用到专业的插件，如果电脑上没有安装的话，建议你还是是查询一下专业版

1、下载好开发包后就可以开始了，第一步引入开发包，和需要的主题文件（可定义自己的主体文件），并定义好页面布局。2.0以后上的版本，需要把开发包放到body下，否则ie低版本会出现属性未找到的错误，导致图标初始化失败。2、第二步，普通初始化图表，通过调用开发包方法，有两种初始化方式，1.var myChart = echarts.init(document.getElementById("echart"));2.var myChart=require("echarts").init(document.getElementById("echart"));一般建议使用第一种方法进行初始化操作。3、第三步，设置option属性，来给图表设置数据,option是数组元素，tooltip：提示框，legend图例，calculable可设置是否拖拽，series设置数据（data类型也为数组类型），开始先随机初始化几条模拟数据，4、到这一步，就完成了，图表初始化的步骤，效果如下图所示。然后大家可以改变下图标的样式，2.0版本留了设置主题的方法，可设置setThem()对图表样式进行修改。5、看看主题怎么配置，设置色版，设置主题颜色，不一一介绍了，请大家请看下面代码：6、通过上面主题的添加完成了对样式的修改，当然最后大家记嘚设置myChart.setTheme(theme);

1、首先在电脑上新建一个分类echart图表，然后X轴数据做一列输入，Y轴数据做一列输入。2、然后选中这些数据，插入散点图中的第一个图表。3、最后在图表中会出现一个函数式，X前面的数就是直线的斜率。

您可以通过在 ECharts 的 tooltip 中自定义内容的方式，将两个指针的数值都显示出来。具体实现方法如下所示：1. 在 ECharts 的配置项中，设置 tooltip 的 formatter 属性为一个函数，例如：```tooltip: { formatter: function(params) { return params[0].name + "<br/>" + params[0].marker + "指针1" + ": " + params[0].value + "<br/>" + params[1].marker + "指针2" + ": " + params[1].value; }}```2. 在函数内部，通过 `params` 参数获取到每个指针的数值，并将它们拼接成需要的格式返回。注意，这里使用了 `params[0]` 和 `params[1]` 来分别获取两个指针的参数，如果您的数据结构不同，需要根据实际情况来进行修改。希望这个方法可以帮到您！

不是。1、echart地图坐标，省市区三级坐标，适应于坐标点展示，坐标位置准确。2、Echarts地图可以实现：自定义地图数据，但是需要为经纬度坐标系的geojson格式数据。

最近做大屏用echart里面的矢量地图，上面需要显示一些标签。 标签使用常规的做法，即用散点图，坐标则设为地图坐标： 出来的效果如图： 这里有个比较大的问题，标签显示会重叠在一起。我给标签设置了事件，鼠标放上去之后，对应标签会亮起，其它会变暗。然而，客户仍然希望不要出现遮挡的情况。 查了一下echart文档的scatter部分，labelLayout有两个跟标签重叠相关的参数。 hideOverlap参数会在标签重叠时隐藏一部分。这是一种解决办法，不过客户希望显示所有标签，不要隐藏。 实现的效果如图： 虽然不重叠了，但看起来有点凌乱。而且当图标超过一定数量，其实还是会重叠。所以，它只是优化，尽可能不重叠，但不能确保不重叠。 仍然使用labelLayout参数，然而返回的dx, dy 我需要自己计算。 我需要有一个方法得到标签的偏移值。 现在试想一下， 我把地图划分成固定的格子。 如此每一个散点都会在一个格子里面。当labelLayout方法执行时，从params里面可以得到这些参数 函数的主体部分是这样的： 算法的关键在于通过posMap对象记录已经分配的格子，由于在地图缩放时，param.rect坐标会发生变化，所以，要在缩放之后将posMap对象清空再通过调用实例的resize方法重新计算。 最后实现的效果，不管有多少标签，都会整齐排布，而且缩放之后会自动调整：

echarts折线图第二条折线的值总是第一条折线加第二条折线的和，怎么设置为不是这样使用EXCEL绘制折线图,为了表现两条折线的差经常会需要将两条折线之间的面积填充颜色,那么怎么实现这一效果呢?直接使用折线图,没有办法实现这一功能,但是通过面积图,只要稍微做些设置,就可以实现这一效果,如下举例说明:如下数据,先对其增加辅助列(两列数据之差):选中第一列数据和辅助数列,插入堆积面积图。选中下面的面积图,填充为无色。右击图表,选则源数据,将第二列数据(乙列)添加到图表中。右击图表,点击【更改系列图表格式】,在组合中将新添加的系列设置为折线图点击新添加的折线图,可以更改颜色和宽度,折线图交叉阴影完成如何用Echarts制作标准折线图我们经常使用Echarts制作各种图表,那么如何运用Echarts制作标准折线图呢?下面我给大家演示一下。01首先打开SublimeText软件,新建一个HTML文档,并在文档中添加如下图所示的HTML结构02接下来运用scripts标签在HTML中引入echarts的库文件,如下图所示03然后我们在body标签中创建一个div区域用来存放折线图,如下图所示,注意给div设置高度04接下来我们通过echarts的init方法对刚才创建的div区域进行初始化,如下图所示05然后我们设置折线图的参数,包括X,Y坐标轴数据,折线图标题等信息,如下图所示06接下来在series参数中设置折线图所需要的数据,如下图所示,一条折线配置一个大括号07参数和数据设置完毕以后我们调用echarts的setOption方法将内容都填充进折线图展示区域,如下图所示08最后我们运行HTML文件,就可以看到如下图所示的标准折线图了,点击顶部的折线标题可以隐藏或者显示折线Vue-ele中echart折线图动态展示和修改<LineChart:reportsList="reportsList"_-if="(reportsList).length"/>data(){return{reportsList:{},};},created(){reportsGet("reports/type/1").then((res)=>{(res);let{meta,data}=;if(==200){=data;}else{this.$();}});},data(){return{lineList:{},};},props:{reportsList:{type:Object,default:()=>{return{title:{text:"折线图",},tooltip:{},xAxis:{axisLabel:{interval:0,rotate:0,margin:15},data:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],},yAxis:{},series:[{name:"销量",type:"line",data:[5,20,36,10,10,20],},],};},},},mounted(){varmyChart=(this.$);=(());={text:"折线图",};/*给折线图设置上下左右的距离*/="10%";[0].axisLabel={interval:0,rotate:30,margin:15};={top:"30%",width:"80%",height:"50%",left:"20%",};/*把折线图所属区域删掉*/(r=>{deleter.areaStyle;r.smooth=true})();=myChart;},};

在某些需求下需要用到树形图来表达数据结构，我使用的是 echarts ，关于 echart 树形图的基础配置和使用这里就不展开。 直接上图，这是一个基础的树形图demo： 当点击非最末节点的时候，echart的默认行为为收缩该节点的子节点，这个行为会与下面实现的效果有关系，效果： 下面进入实现，一开始思考这个需求的时候，以为跟经常做的柱状图点击更换柱子颜色一样，都是去替换配置，当然某种情况下也是可以实现的，先简单说一下树形图的 data 结构，是使用 children 属性层层嵌套的结构： 按上面的思路，只要监听节点的点击事件，然后获取对应链路相关的节点，更改他们的 lineStyle ，然后 echart 实例重新 setOption 就可以，下面看一下大概实现： 看一下点击节点， echart 带的参数 到这里这种点击更换相关节点 linestyle 的方式就实现，但是这种方式有两个问题： 1.上面我们是假设 value 是唯一的，如果实际开发中 value 有实际用途不能让我们生成唯一的值，这种方法就无法实现。但这个还不是致命的。 2.上面说到，非最末节点点击时，会收缩与展开它的子节点，而我们上面实现高亮的时候是重新 setOption ，会将已操作的交互覆盖掉，点击前效果： 实现高亮的核心还是更换节点属性的 linestyle ，但是不能通过重新 setOption 来实现，在翻遍 echart 配置项的时候，最后看到了一个属性和一个方法： 实现： 先在 echart 配置项中添加 emphasis 时的效果： 因为 emphasis 属性默认是鼠标移入节点时的效果，所以我们手动触发高亮会和默认行为冲突，需要一个数组保存点击高亮的节点 dataIndex 。 点击时手动触发相关节点的高亮： 还需要覆盖 emphasis 的默认行为，也就是鼠标移入事件： 实现效果： 点击前： 点击后： 实现了。 我是鸭子，祝你幸福。

之前没看过echart的地图，最近有个需求需要绘制到深圳地图，经过几番测试，实现需要的效果，这里写篇博客记录一下，先看效果图:但如果不是node环境呢，比如本地的一个html文件，第一想到的是ajax，但这是本地模拟一下，使用ajax还是有点麻烦，这里超人鸭用一种不太规范的方法引入，这是json文件原本的样子: 我使用一个变量定义这个对象: 然后在html文件中用script标签引入: 这里已经引入成功了，我们可以打印测试一下: 是没问题的，现在拿到深圳地图的json数据，接下来就是绘制地图了，还是echart那一套: 先看看效果: 接下来就是往上面绘制散点图，既然是往以这个地图作为坐标系，那显示在上面点的位置就要在这个地图上，我们需要先写好每个地点的经纬度： 大家百度一下经纬度查询就能找到，然后是散点图的配置，还有一个处理数据的函数: 上面的处理函数也是从官网改造一点细节复制过来的，处理后的每一项data就是这个样子: 散点图会根据value的前两项去匹配坐标，在地图上显示，后面的数据并无关系。到这里的效果: 看到我使用了回调函数格式化了提示框显示的内容，这个回调函数带了一个params参数，这个对象里面基本什么信息都有，大家不知道的话打印一下什么都明了。 到这里就实现使用echart散点图绘制地图，超人鸭这篇文章所实现的适合那种某个区域的某种东西的分布情况，用处还是挺大的，欢迎大家指教哦。

做移动端数据可视化产品，需要封装echarts图表做子组件，并兼容原先pc端api请求格式，还引入了地图数据，支持省份下钻。完成所有功能后，vendor大小2.49M，build速度59s，首屏加载速度和webpack打包速度都很慢。 webpack: 3.6 echarts:4.1 优化1:echart按需加载 （echart整体画图数据包700KB，比highcharts和f2要大，技术选型上可以考虑一下其他方案。） 从全局引用，优化为按需引用。引用echarts压缩过的省份地图的js数据，json数据会大一些，还需要registerMap。 优化2:路由懒加载，vue异步组件，vendor分包，首屏加载速度加快。 将路由页面拆分chunk打包，所有路由页面打包在cube中。 按需加载省市js数据，打包到province中。 封装echart子组件，打包到echarts中。 分包结果： npm run build --report 优化3:webpack打包速度 分包后build速度41s，先用 webpack-visualizer-plugin 分析一下当前打包的状况。 生产环境： 配置CommonsChunkPlugin 加速文件搜索 配置 resolve.modules 设置 test & include & exclude 使用并行压缩插件 webpack-parallel-uglify-plugin 配置externals（cdn）（会增加首屏加载时长） DllPlugin和DllReferencePlugin （会加载首屏加载时长） 使用HappyPack来加速构建 npm run build:dll npm run build webpack 3.x版本，add-asset-html-webpack-plugin需要2.1.3版本。 报错： TypeError: Cannot read property "compilation" of undefined 减少webpack打包时间，省份数据还编译。 加了cache-loader做缓存，用了 only-if-changed-webpack-plugin 插件，发现全局不动不编译，有一点动都编译。还和 html-webpack-plugin 有冲突。 巨大的echarts让人头大。 一开始想让打包好的dll，可以不首屏加载，动态加载。 发现有一个scriptjs的插件。 把echarts、地图数据拆到cdn里，scriptjs按需加载。 总结： 程序猿学好英语是件很重要的事情，github看的让人头大。 小师傅好厉害，哈哈哈。 相关链接： https://www.npmjs.com/package/scriptjs https://github.com/webpack/webpack/issues/3115