javascript-如何使用最新的echarts.js文件—

如何使用最新的echarts.js文件: 谁能教教我或者发个博文的链接学学怎么使用最新的echarts.js，
组长不让用以前的js文件，让我把bar，pie什么的删了，说直接用最新的就可以，
没有这些，怎么用最新的js文件按需加载饼图，折现，柱状图啊啊啊啊？; 编辑于：2017.10.14 02:31 发布于：2017.10.14 02:13

| 评论0 | 收藏 | 浏览2673 |

: Kuroro_Lucifer

声望： 22

1个回答

按赞数排序

1. 选择正确的echarts.js，开发版选择echarts.baidu.com上的源码版，避免出现问题
2. 在项目主目录中新建static文件夹，里面建立js、css、images文件夹
3. 在settings文件中新增如下代码配置：
复制代码
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATICFILES_DIRS = (
('css', os.path.join(STATIC_ROOT, 'css').replace('\', '/')),
('js', os.path.join(STATIC_ROOT, 'js').replace('\', '/')),
('images', os.path.join(STATIC_ROOT, 'images').replace('\', '/')),
)
复制代码
4. 在html页面引入本地js文件static/js/echarts.js

5. 启动python Django服务器
python3 manage.py runserver
6. 刷新页面，OK
成功将网络echarts.js文件改成引用本地echarts.js文件

发布于：2017.10.14 16:11

评论 1 |

: jijiajun0103

声望： 0

: Kuroro_Lucifer 我已经弄好了，谢谢您的回复; 2 年多之前回复

: 插入链接

本地上传网络图片

上传中...

浏览

上传图片

插入图片

其他相关推荐

echarts3.0 引用json地图: echarts3.0有两个引入地图的方式， http://echarts.baidu.com/download-map.html 我用js的方法引入成功了，但是用json的方法就是看不到地图（火狐也看不到），空白一片以下是我的目录结构 F:\MyEcharts3.0 -china.js -china.json -echarts.js -echarts.min.js -jquery.min.js -macarons2.js -MyTest.html china.json是echarts官网下载的以下是我的html代码 <!DOCTYPE html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">  <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="./echarts.js"></script> <script src="./jquery.min.js"></script> <title>ECharts</title> <style> </style> </head> <body> <div id="main" style="height:800px;width:100%;border:1px solid black;"></div> <script> $.get('./china.json', function (chinaJson) { echarts.registerMap('china', chinaJson); var chart = echarts.init(document.getElmentById('main')); chart.setOption({ series: [{ type: 'map', map: 'china' }] }); }); //myChart.setOption(option); </script> </body> 本人是新手，因为工作需要才开始接触echarts，html，希望大神耐心指导，谢谢顺便弱弱的问一下echarts3.0怎么像之前一样，加载主题文件？

echarts3.0 新的图形数据，怎么获取本地图形数据文件: ![图片说明](https://img-ask.csdn.net/upload/201601/18/1453093225_770639.png) 想做一个简单的网页例子，得到如上图的效果官网API代码： ``` myChart.showLoading(); $.get('data/asset/data/les-miserables.gexf', function (xml) { myChart.hideLoading(); var graph = echarts.dataTool.gexf.parse(xml); var categories = []; for (var i = 0; i < 9; i++) { categories[i] = { name: '类目' + i }; } graph.nodes.forEach(function (node) { node.itemStyle = null; node.value = node.symbolSize; node.label.normal.show = node.symbolSize > 30; node.category = node.attributes.modularity_class; }); option = { title: { text: 'Les Miserables', subtext: 'Default layout', top: 'bottom', left: 'right' }, tooltip: {}, legend: [{ // selectedMode: 'single', data: categories.map(function (a) { return a.name; }) }], animationDuration: 1500, animationEasingUpdate: 'quinticInOut', series : [ { name: 'Les Miserables', type: 'graph', layout: 'none', data: graph.nodes, links: graph.links, categories: categories, roam: true, label: { normal: { position: 'right' } }, lineStyle: { normal: { curveness: 0.3 } } } ] }; myChart.setOption(option); }, 'xml'); ``` 自己的html代码： ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title>  <script src="echarts.min.js"></script> <script src="jquery.js"></script> </head> <body>  <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); myChart.showLoading(); $.get('data/asset/data/les-miserables.gexf', function (xml) { myChart.hideLoading(); var graph = echarts.dataTool.gexf.parse(xml); var categories = []; for (var i = 0; i < 9; i++) { categories[i] = { name: '类目' + i }; } graph.nodes.forEach(function (node) { node.itemStyle = null; node.value = node.symbolSize; node.label.normal.show = node.symbolSize > 30; node.category = node.attributes.modularity_class; }); option = { title: { text: 'Les Miserables', subtext: 'Default layout', top: 'bottom', left: 'right' }, tooltip: {}, legend: [{ // selectedMode: 'single', data: categories.map(function (a) { return a.name; }) }], animationDuration: 1500, animationEasingUpdate: 'quinticInOut', series : [ { name: 'Les Miserables', type: 'graph', layout: 'none', data: graph.nodes, links: graph.links, categories: categories, roam: true, label: { normal: { position: 'right' } }, lineStyle: { normal: { curveness: 0.3 } } } ] }; myChart.setOption(option); }, 'xml'); </script> </body> </html> ``` data/asset/data/les-miserables.gexf 文件是我从官网下载打开的时候报错： ![图片说明](https://img-ask.csdn.net/upload/201601/18/1453093775_885952.png)

echarts使用markline报错'coordSys.getOtherAxis is not a function'。: 仿照echarts地图在已经加载好的地图上写markline后报错'coordSys.getOtherAxis is not a function'，提示是echarts.js的问题，请问如果改markline代码？是文件引用不对吗？谢谢大佬们

刚工作，最近接触到了echarts，请问其中的require对象是什么?: 官网给的示例代码，我想问，require是什么东东? <!DOCTYPE html> <head> <meta charset="utf-8"> <title>ECharts</title> </head> <body>  <div id="main" style="height:400px"></div>  <script src="http://echarts.baidu.com/build/dist/echarts.js"></script> <script type="text/javascript"> // 路径配置 require.config({ paths: { echarts: 'http://echarts.baidu.com/build/dist' } }); // 使用 require( [ 'echarts', 'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载 ], function (ec) { // 基于准备好的dom，初始化echarts图表 var myChart = ec.init(document.getElementById('main')); var option = { tooltip: { show: true }, legend: { data:['销量'] }, xAxis : [ { type : 'category', data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] } ], yAxis : [ { type : 'value' } ], series : [ { "name":"销量", "type":"bar", "data":[5, 20, 40, 10, 10, 20] } ] }; // 为echarts对象加载数据 myChart.setOption(option); } ); </script> </body>

echarts官方源码，自己使用，显示乱码: ![图片说明](https://img-ask.csdn.net/upload/201507/11/1436582156_783526.png) 如上图所示所用源码为Echarts百度官网的源代码 ``` <!DOCTYPE html> <head> <meta charset="utf-8"> <title>大家好</title> </head> <body>  <div id="main" style="height:400px"></div>  <script src="http://echarts.baidu.com/build/dist/echarts.js"></script> <script type="text/javascript"> // 路径配置 require.config({ paths: { echarts: 'http://echarts.baidu.com/build/dist' } }); // 使用 require( [ 'echarts', 'echarts/chart/line' // 使用柱状图就加载bar模块，按需加载 ], function (ec) { // 基于准备好的dom，初始化echarts图表 var myChart = ec.init(document.getElementById('main')); var option = { tooltip: { show: true }, legend: { data:['销量'] }, xAxis : [ { type : 'category', data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] } ], yAxis : [ { type : 'value' } ], series : [ { "name":"销量", "type":"bar", "data":[5, 20, 40, 10, 10, 20] } ] }; // 为echarts对象加载数据 myChart.setOption(option); } ); </script> </body> ``` 坐等大神指点下

【echarts示例】jQuery引入json文件后，网页显示不了数据？: ``` <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title> scatter3D</title> <script src="echarts.js"></script> <script src="http://echarts.baidu.com/dist/echarts-gl.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.js"></script> </head> <body> <div id="main" style="width:600px;height:500px;"></div> <script > var myChart = echarts.init(document.getElementById('main')); $.get('expectancy-table.json', function (data) { myChart.setOption({ grid3D: {}, xAxis3D: {}, yAxis3D: {}, zAxis3D: {}, dataset: { source: data }, series: [ { type: 'scatter3D', symbolSize: 2.5 } ] }) }); myChart.setOption(Option); </script> </body> </html> ``` 小白刚学习echarts，在用$.get方法引入json文件后，运行时网页无法显示数据（空白的），想请教大家这是什么原因？（在VS2012上编写的）以下是网页的错误提示： ![图片说明](https://img-ask.csdn.net/upload/201812/12/1544591763_956397.jpg)

echarts geoJson 地图: 以下是我的html代码，option和GeoJson部分完全是抄官网http://echarts.baidu.com/doc/example/map6.html里面的代码，但是我不知道require GeoJson部分应该放在那里(怎么用)，请大神指点下，谢谢我现在这样hk的地图加载不出来 ``` <!DOCTYPE html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">  <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet">   <script src="./bootstrap/js/jquery.min.js"></script>  <script src="./echarts/doc/asset/js/bootstrap.min.js"></script> <title>ECharts</title> <style> </style> </head> <body> <div id="main" style="margin-top:10px;height:400px;width:100vw;"></div>  <script src="./echarts/build/dist/echarts.js"></script>  <script type="text/javascript"> // 路径配置 require.config({ paths: { echarts: './echarts/build/dist' } }); //-- 4、标签内动态加载echarts和所需图表，回调函数中可以初始化图表并驱动图表的生成--> // 使用 require( [ 'echarts', 'echarts/theme/helianthus', 'echarts/chart/map' ], function (ec,theme) { // 基于准备好的dom，初始化echarts图表 var myChart = ec.init(document.getElementById('main'),theme); require('echarts/util/mapData/params').params.HK = { getGeoJson: function (callback) { $.getJSON('./echarts/doc/example/geoJson/HK_geo.json',callback); } }; var option = { title : { text : '香港18区人口密度（2011）', subtext: '人口密度数据来自Wikipedia', sublink: 'http://zh.wikipedia.org/wiki/%E9%A6%99%E6%B8%AF%E8%A1%8C%E6%94%BF%E5%8D%80%E5%8A%83#cite_note-12' }, tooltip : { trigger: 'item', formatter: '{b}<br/>{c} (p / km2)' }, toolbox: { show : true, orient : 'vertical', x: 'right', y: 'center', feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, restore : {show: true}, saveAsImage : {show: true} } }, dataRange: { min: 800, max: 50000, text:['High','Low'], realtime: false, calculable : true, color: ['orangered','yellow','lightskyblue'] }, series : [ { name: '香港18区人口密度', type: 'map', mapType: 'HK', // 自定义扩展图表类型 itemStyle:{ normal:{label:{show:true}}, emphasis:{label:{show:true}} }, data:[ {name: '中西区', value: 20057.34}, {name: '湾仔', value: 15477.48}, {name: '东区', value: 31686.1}, {name: '南区', value: 6992.6}, {name: '油尖旺', value: 44045.49}, {name: '深水埗', value: 40689.64}, {name: '九龙城', value: 37659.78}, {name: '黄大仙', value: 45180.97}, {name: '观塘', value: 55204.26}, {name: '葵青', value: 21900.9}, {name: '荃湾', value: 4918.26}, {name: '屯门', value: 5881.84}, {name: '元朗', value: 4178.01}, {name: '北区', value: 2227.92}, {name: '大埔', value: 2180.98}, {name: '沙田', value: 9172.94}, {name: '西贡', value: 3368}, {name: '离岛', value: 806.98} ], // 自定义名称映射 nameMap: { 'Central and Western':'中西区', 'Eastern':'东区', 'Islands':'离岛', 'Kowloon City':'九龙城', 'Kwai Tsing':'葵青', 'Kwun Tong':'观塘', 'North':'北区', 'Sai Kung':'西贡', 'Sha Tin':'沙田', 'Sham Shui Po':'深水埗', 'Southern':'南区', 'Tai Po':'大埔', 'Tsuen Wan':'荃湾', 'Tuen Mun':'屯门', 'Wan Chai':'湾仔', 'Wong Tai Sin':'黄大仙', 'Yau Tsim Mong':'油尖旺', 'Yuen Long':'元朗' }, // 文本位置修正 textFixed : { 'Yau Tsim Mong' : [-10, 0] }, // 文本直接经纬度定位 geoCoord : { 'Islands' : [113.95, 22.26] } } ] }; // 为echarts对象加载数据 myChart.setOption(option); window.onresize = myChart.resize; //jquery ba-resize监听他的container //$("#dcDataUseStatisticContainer").resize(function(){$(myChart).resize();}) } ); </script> </body> ```

利用echarts绘制关系图，如何根据边的权重设置边的粗细？: 利用echarts Les Miserables的例子绘制了一个关系图，现在想根据边的权重设置边的粗细 ``` <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title>  <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript" src="../js/jquery.js"></script> <script type="text/javascript" src="../js/echarts.min.js"></script> <script type="text/javascript" src="../js/dataTool.js"></script> </head> <body style="height: 600px; margin: 0"> <div id="container" style="height: 100%"></div> <script type="text/javascript"> var dom = document.getElementById("container"); var myChart = echarts.init(dom); var app = {}; option = null; myChart.showLoading(); $.get('../data/1.gexf', function (xml) { myChart.hideLoading(); var graph = echarts.dataTool.gexf.parse(xml); console.log(JSON.stringify(graph)); var categories = []; for (var i = 0; i < 9; i++) { categories[i] = { name: '类目' + i }; } graph.nodes.forEach(function (node) { node.itemStyle = null; node.value = node.symbolSize; node.symbolSize /= 1.5; node.label = { normal: { show: node.symbolSize > 1 } }; node.category = node.attributes.modularity_class; } ); option = { title: { text: 'Les Miserables', subtext: 'Circular layout', top: 'bottom', left: 'right' }, tooltip: {}, legend: [{ // selectedMode: 'single', data: categories.map(function (a) { return a.name; }) }], animationDurationUpdate: 1500, animationEasingUpdate: 'quinticInOut', series : [ { name: 'Les Miserables', type: 'graph', layout: 'circular', circular: { rotateLabel: true }, data: graph.nodes, links: graph.links, categories: categories, roam: true, label: { normal: { position: 'right', formatter: '{b}' } }, edgeSymbol : [ 'none', 'arrow' ], lineStyle: { normal: { color: 'source', curveness: 0.3, } } } ] }; myChart.setOption(option); }, 'xml'); if (option && typeof option === "object") { var startTime = +new Date(); myChart.setOption(option, true); var endTime = +new Date(); var updateTime = endTime - startTime; console.log("Time used:", updateTime); } </script> </body> </html> ``` ``` gexf文件的内容为 ![图片说明](https://img-ask.csdn.net/upload/201910/20/1571555464_32358.png) 运行效果为

js引入文件时用相对路径还是绝对路径，为什么绝对路径在火狐不兼容？: ``` 如果用相对路径，chrome和火狐都兼容，但是用绝对路径的时候出现了问题： 1、<script src="E:\src\echarts.min.js"></script> 这样写绝对路径的时候，chrome可以用，火狐不可以 2、<script src="file:\\E:\src\echarts.min.js"></script> 这样写，chrome和火狐都可以查了半天还是搞不清楚为什么，求各位大神帮忙解答 ```

sonarqube 扫描使用Junit做单元测试的代码覆盖率为0？: 代码用Junit做单元测试后提交至svn，checkout到本地进行静态代码检查，视图中覆盖率显示为0. project.properties文件配置如下： # Required metadata sonar.projectKey=EmailTestssh sonar.projectName=EmailTestssh sonar.projectVersion=V1.0 # Comma-separated paths to directories with sources (required) sonar.sources=src #sonar.exclusions=WebRoot\js\echarts.js sonar.java.binaries=target/classes # Language #sonar.language=java # Encoding of the source files sonar.sourceEncoding=UTF-8

较大的静态资源加载不了，控制台报net::ERR_CONTENT_LENGTH_MISMATCH 200错误，怎么解决？: 控制台报错：__GET https ://192.168.10.60/audit/js/echarts/3.8.5/echarts.min.js net::ERR_CONTENT_LENGTH_MISMATCH 200 本地可以正常加载，测试环境就会报错，把静态资源换成较小的可以加载，百度上都说是nginx缓存文件权限不够造成的，实际上没有用nginx代理。

新手Echarts问题：为什么官网有些案例无法直接调用？: 因为工作需要，公司最近需要我们去调用一下echarts。因为以前没有用过echarts,只好先去学习一下。今天在测试echarts时却发现了一个问题：官网发的大部分案例都可以直接复制执行，还有一些是需要json文件的暂且不论。今天测试的这个，我看过代码没有调用json文件的记录，却还是显示一片空白。 echarts环境：echarts用的是官网的2.08M的源码包，浏览器是 firfox. ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> <script src="echarts.js"></script> </head> <body> <div id="charts" style="position: absolute;width: 80%;height: 80%;"> </div> </body> <script> var charts=echarts.init(document.getElementById('charts')); //为了代码可读性，我把系统给的数据全部以 data 代替 var data0 = [ data ]; var data = [ data ]; // See https://github.com/ecomfe/echarts-stat var myRegression = ecStat.regression('logarithmic', data); myRegression.points.sort(function(a, b) { return a[0] - b[0]; }); option = { legend: { data: ['1990', '2015'], bottom: 20 }, title: { text: '1990 and 2015 per capita life expectancy and GDP', subtext: 'By ecStat.regression', sublink: 'https://github.com/ecomfe/echarts-stat', left: 'center' }, tooltip: { trigger: 'axis', axisPointer: { type: 'cross' } }, grid: { top: 80, bottom: 90 }, xAxis: { type: 'value', splitLine: { lineStyle: { type: 'dashed' } }, }, yAxis: { type: 'value', splitLine: { lineStyle: { type: 'dashed' } }, }, series: [{ name: '1990', type: 'scatter', symbolSize: function(data) { return Math.sqrt(data[2]) / 5e2; }, label: { emphasis: { show: true, formatter: function(param) { return param.data[3]; }, position: 'top' } }, itemStyle: { normal: { shadowBlur: 10, shadowColor: 'rgba(120, 36, 50, 0.5)', shadowOffsetY: 5, color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{ offset: 0, color: 'rgb(251, 118, 123)' }, { offset: 1, color: 'rgb(204, 46, 72)' }]) } }, data: data0 }, { name: '2015', type: 'scatter', symbolSize: function(data) { return Math.sqrt(data[2]) / 5e2; }, label: { emphasis: { show: true, formatter: function(param) { return param.data[3]; }, position: 'top' } }, itemStyle: { normal: { shadowBlur: 10, shadowColor: 'rgba(25, 100, 150, 0.5)', shadowOffsetY: 5, color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{ offset: 0, color: 'rgb(129, 227, 238)' }, { offset: 1, color: 'rgb(25, 183, 207)' }]) } }, data: data1 }, { name: 'line', type: 'line', lineStyle: { normal: { color: '#2f4554' } }, smooth: true, showSymbol: false, data: myRegression.points, markPoint: { itemStyle: { normal: { color: 'transparent' } }, label: { normal: { show: true, position: 'left', formatter: myRegression.expression, textStyle: { color: '#333', fontSize: 14 } } }, data: [{ coord: myRegression.points[myRegression.points.length - 1] }] } }] }; charts.setOption(option); </script> </html> ``` 如果我数据的修改影响了判断,这里是源码--->[Echarts代码源码](https://echarts.baidu.com/examples/editor.html?c=scatter-logarithmic-regression "")

用Echarts制作饼图没有显示。: 用Echarts制作饼图没有显示，pie页面代码如下： ``` <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="js/jquery-1.11.3.js"></script> <script type="text/javascript" src="js/echarts.min.js"></script> <title>饼图例子</title> </head> <body> <div id="mainChart" style="width: 600px;height:400px;"> </div> <script type="text/javascript"> //使用ajax加载数据 $.ajax({ method : 'post', url : 'pie', dataType : 'json', success : function(data) {//data格式:[{name:nameValue,value:valueVal},...] initChat(data); } }); function initChat(data) { var myChart = echarts.init(document.getElementById('mainChart')); option = { backgroundColor: '#cccccc', color:["#D53A35","#296294"], title : { text : '用户性别聚合分析', x : 'center' }, tooltip : { trigger : 'item', formatter : "{a} <br/>{b} : {c} ({d}%)" }, legend : { orient : 'vertical', left : 'left', data : formatData(data).xAxData }, series : [ { name : '男女数量', type : 'pie', radius : '55%', center : [ '50%', '60%' ], color:['#297ca3','#c35b3b'], data : formatData(data).serData, itemStyle : { emphasis : { shadowBlur : 10, shadowOffsetX : 0, shadowColor : 'rgba(0, 0, 0, 0.5)' } } } ] }; myChart.setOption(option, true); }; function formatData(data) { var xAxData = []; var serData = []; for (var i = 0; i < data.length; i++) { xAxData.push(data[i].name || ""); serData.push({ name : data[i].name, value : data[i].value || 0 }); } return { xAxData : xAxData, serData : serData }; }; </script> </body> </html> ``` 我把这篇代码删掉，只输出个字符串，是可以显示的，把这个代码放上就不行了，我感觉应该是这篇代码的问题，我把Controller的代码放在下面： ``` package com.ssh.controller; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.ResponseBody; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; @Controller public class EchartsController { @RequestMapping("/topie") public String toPie(){ return "pie"; } @RequestMapping(value="pie",method= RequestMethod.POST) @ResponseBody //处理的是异步请求，并且响应的结果是json格式 public List<Map<String, Object>> getPieData() { List<Map<String, Object>> data = new ArrayList<>(); Map<String, Object> map = new HashMap<String, Object>(); map.put("name", "男"); map.put("value", "20"); data.add(map); map = new HashMap<String, Object>(); map.put("name", "女"); map.put("value", "30"); data.add(map); return data; } } ``` 找了很久，也没找到问题，求大神帮助！！！！我的项目目录如下： ![图片说明](https://img-ask.csdn.net/upload/201912/28/1577517453_218697.png) 问题已解决：应该是js文件没有引入，我开始调了很长时间都没有用，js那删了改改了删但最后还是和现在代码一样，但是可以显示了，昨天弄了很久都没弄出来，哎，具体原因，为什么会这样，我也不是很清楚，有懂得大神吗，求解答结果现在是这样这样的 ![图片说明](https://img-ask.csdn.net/upload/201912/29/1577592792_561495.png)

echarts里option数据，怎样能不重新加载？: echarts里option的data数据来自本地的json文件，使用myChart.setOption(option,true)加载在前端显示。我添加了一个click事件，每触发一次click会触发series更新，再通过myChart.setOption(option,true将click结果展示在前端。但是这样最初的.json文件也会重新加载，由于.json文件很大，因此整体加载很慢，请问有没有什么方法可以不重新加载最初的.json数据？谢谢大佬们。![图片说明](https://img-ask.csdn.net/upload/201909/10/1568117983_61303.png)![图片说明](https://img-ask.csdn.net/upload/201909/10/1568118047_48247.png)

关于echarts水球图插件加载不正确的问题: js文件的路径都配置正确了，但是页面就是不显示图表，而且控制台显示![图片说明](https://img-ask.csdn.net/upload/201703/26/1490539192_191305.jpg)，求大神来解答

Echarts图表中字体设置问题（引入外部字体文件）: UI给出的界面字体确实很漂亮，找了半天找了个1M多的字体文件，页面字体都改好了，Echarts图表的字体只能在js里面设置，之前都用Chrome调，显示正常，现在马上全部调完了突然发现Echarts图表的字体在FF没有显示引入外部字体文件的字体，而是默认的宋体，这什么情况？

react-redux项目出现问题，求解决: 最近刚开始做react-redux项目，不太熟悉，出了很多错，求大手子指点。项目文件的目录大概这样![目录](https://img-ask.csdn.net/upload/201708/04/1501831910_597035.png) 我在show2.html中引入了show2.js文件，show2.js文件中包含了react组件，show2.html的情况是这样![show2.html](https://img-ask.csdn.net/upload/201708/04/1501832022_440013.png) 在show2.js中引入了一个react组件，show2.js中是这样写的![show2.js](https://img-ask.csdn.net/upload/201708/04/1501832082_317460.png)，所引入的charts是这样![Charts](https://img-ask.csdn.net/upload/201708/04/1501832121_737005.png), 其中，引入的start是这样 ``` import React, {Component} from 'react'; const echarts = require('echarts'); class Start extends Component { constructor(props) { super(props); this.setChartOption = this.setChartOption.bind(this); this.initChart = this.initChart.bind(this); } initChart() { $.ajax({ url: this.props.url, dataType: 'json', cache: false, success: function (data) { let myChart = echarts.init(this.props.div);//初始化echarts //我们要定义一个setPieOption函数将data传入option里面 console.log('22222'); //设置options myChart.setOption(data); // myChart.setOption(this.props.chartStyle); }.bind(this), error: function () { alert('未获取到数据'); }.bind(this) }); } componentDidMount() { this.initChart(); } componentDidUpdate() { this.initChart(); } render() { return null; } } export default Start; ``` 现在碰到的问题是这样!（数字是我测试用的，没有影响）![error](https://img-ask.csdn.net/upload/201708/04/1501832702_379616.png) 我刚开始在show2.js中使用的是import引入所需组件，报的是这样的错![error2](https://img-ask.csdn.net/upload/201708/04/1501832373_458244.png) 最近刚开始做这方面的东西，现在我该怎么办啊？运行不起来，我也不知道哪里出错了，求大手子前辈指点

求救啊 echart树形图问题: <div id="Graphical" style="width:100%;height:300px"></div> <script type="text/javascript"> var myChart = echarts.init(document.getElementById('Graphical')); var myChart.showLoading(); $.get('data/asset/data/flare.json', function (data) { myChart.hideLoading(); echarts.util.each(data.children, function (datum, index) { index % 2 === 0 && (datum.collapsed = true); }); myChart.setOption(option = { tooltip: { trigger: 'item', triggerOn: 'mousemove' }, series: [ { type: 'tree', data: [data], top: '1%', left: '7%', bottom: '1%', right: '20%', symbolSize: 7, label: { normal: { position: 'left', verticalAlign: 'middle', align: 'right', fontSize: 9 } }, leaves: { label: { normal: { position: 'right', verticalAlign: 'middle', align: 'left' } } }, expandAndCollapse: true, animationDuration: 550, animationDurationUpdate: 750 } ] }); }); myChart.setOption(option); </script> 该引的文件都引了 demo也是官方的折线图就好使但是树形图就显示不出来这个是报错Uncaught SyntaxError: Unexpected token .

【无需代码】nodejs用tcp接收到数据后，怎么显示到echarts上呢: 用的nodejs的net模块，接收到服务器数据并且成功转化成数组后了（服务器是c++写的），想显示到echarts上面，接下来该怎么做呢？（主要就是从原本的buffer数据利用到echars的这个过程不清楚）因为之前模拟echarts，显示我最早用的ajax轮询，直接编的数据存在json文件里读取就是了，现在不知道还能不能这样做。 100ms刷新一次，有没有可靠的方法。

相见恨晚的超实用网站: 相见恨晚的超实用网站持续更新中。。。

Java学习的正确打开方式: 在博主认为，对于入门级学习java的最佳学习方法莫过于视频+博客+书籍+总结，前三者博主将淋漓尽致地挥毫于这篇博客文章中，至于总结在于个人，实际上越到后面你会发现学习的最好方式就是阅读参考官方文档其次就是国内的书籍，博客次之，这又是一个层次了，这里暂时不提后面再谈。博主将为各位入门java保驾护航，各位只管冲鸭！！！上天是公平的，只要不辜负时间，时间自然不会辜负你。何谓学习？博主所理解的学习，它是一个过程，是一个不断累积、不断沉淀、不断总结、善于传达自己的个人见解以及乐于分享的过程。

程序员必须掌握的核心算法有哪些？: 由于我之前一直强调数据结构以及算法学习的重要性，所以就有一些读者经常问我，数据结构与算法应该要学习到哪个程度呢？，说实话，这个问题我不知道要怎么回答你，主要取决于你想学习到哪些程度，不过针对这个问题，我稍微总结一下我学过的算法知识点，以及我觉得值得学习的算法。这些算法与数据结构的学习大多数是零散的，并没有一本把他们全部覆盖的书籍。下面是我觉得值得学习的一些算法以及数据结构，当然，我也会整理一些看过...

大学四年自学走来，这些私藏的实用工具/学习网站我贡献出来了: 大学四年，看课本是不可能一直看课本的了，对于学习，特别是自学，善于搜索网上的一些资源来辅助，还是非常有必要的，下面我就把这几年私藏的各种资源，网站贡献出来给你们。主要有：电子书搜索、实用工具、在线视频学习网站、非视频学习网站、软件下载、面试/求职必备网站。注意：文中提到的所有资源，文末我都给你整理好了，你们只管拿去，如果觉得不错，转发、分享就是最大的支持了。一、电子书搜索对于大部分程序员...

linux系列之常用运维命令整理笔录: 本博客记录工作中需要的linux运维命令，大学时候开始接触linux，会一些基本操作，可是都没有整理起来，加上是做开发，不做运维，有些命令忘记了，所以现在整理成博客，当然vi，文件操作等就不介绍了，慢慢积累一些其它拓展的命令，博客不定时更新 free -m 其中：m表示兆，也可以用g，注意都要小写 Men：表示物理内存统计 total：表示物理内存总数(total=used+free) use...

比特币原理详解: 一、什么是比特币比特币是一种电子货币，是一种基于密码学的货币，在2008年11月1日由中本聪发表比特币白皮书，文中提出了一种去中心化的电子记账系统，我们平时的电子现金是银行来记账，因为银行的背后是国家信用。去中心化电子记账系统是参与者共同记账。比特币可以防止主权危机、信用风险。其好处不多做赘述，这一层面介绍的文章很多，本文主要从更深层的技术原理角度进行介绍。二、问题引入假设现有4个人...

python 简易微信实现（注册登录+数据库存储+聊天+GUI+文件传输）: socket+tkinter详解+简易微信实现历经多天的努力，查阅了许多大佬的博客后终于实现了一个简易的微信O(∩_∩)O~~ 简易数据库的实现使用pands+CSV实现数据库框架搭建 import socket import threading from pandas import * import pymysql import csv # 创建DataFrame对象 # 存储用户数据的表（...

程序员接私活怎样防止做完了不给钱？: 首先跟大家说明一点，我们做 IT 类的外包开发，是非标品开发，所以很有可能在开发过程中会有这样那样的需求修改，而这种需求修改很容易造成扯皮，进而影响到费用支付，甚至出现做完了项目收不到钱的情况。那么，怎么保证自己的薪酬安全呢？我们在开工前，一定要做好一些证据方面的准备（也就是“讨薪”的理论依据），这其中最重要的就是需求文档和验收标准。一定要让需求方提供这两个文档资料作为开发的基础。之后开发...

网页实现一个简单的音乐播放器（大佬别看。(⊙﹏⊙)）: 今天闲着无事，就想写点东西。然后听了下歌，就打算写个播放器。于是乎用h5 audio的加上js简单的播放器完工了。演示地点演示 html代码如下` music 这个年纪七月的风音乐 ` 然后就是css`*{ margin: 0; padding: 0; text-decoration: none; list-...

Python十大装B语法: Python 是一种代表简单思想的语言，其语法相对简单，很容易上手。不过，如果就此小视 Python 语法的精妙和深邃，那就大错特错了。本文精心筛选了最能展现 Python 语法之精妙的十个知识点，并附上详细的实例代码。如能在实战中融会贯通、灵活使用，必将使代码更为精炼、高效，同时也会极大提升代码B格，使之看上去更老练，读起来更优雅。

数据库优化 - SQL优化: 以实际SQL入手，带你一步一步走上SQL优化之路！

2019年11月中国大陆编程语言排行榜: 2019年11月2日，我统计了某招聘网站，获得有效程序员招聘数据9万条。针对招聘信息，提取编程语言关键字，并统计如下：编程语言比例 rank pl_ percentage 1 java 33.62% 2 cpp 16.42% 3 c_sharp 12.82% 4 javascript 12.31% 5 python 7.93% 6 go 7.25% 7 p...

通俗易懂地给女朋友讲：线程池的内部原理: 餐盘在灯光的照耀下格外晶莹洁白，女朋友拿起红酒杯轻轻地抿了一小口，对我说：“经常听你说线程池，到底线程池到底是个什么原理？”

《奇巧淫技》系列-python！！每天早上八点自动发送天气预报邮件到QQ邮箱: 将代码部署服务器，每日早上定时获取到天气数据，并发送到邮箱。也可以说是一个小型人工智障。知识可以运用在不同地方，不一定非是天气预报。

经典算法（5）杨辉三角: 杨辉三角是经典算法，这篇博客对它的算法思想进行了讲解，并有完整的代码实现。

腾讯算法面试题：64匹马8个跑道需要多少轮才能选出最快的四匹？: 昨天，有网友私信我，说去阿里面试，彻底的被打击到了。问了为什么网上大量使用ThreadLocal的源码都会加上private static？他被难住了，因为他从来都没有考虑过这个问题。无独有偶，今天笔者又发现有网友吐槽了一道腾讯的面试题，我们一起来看看。腾讯算法面试题：64匹马8个跑道需要多少轮才能选出最快的四匹？在互联网职场论坛，一名程序员发帖求助到。二面腾讯，其中一个算法题：64匹...

面试官：你连RESTful都不知道我怎么敢要你？: 干货，2019 RESTful最贱实践

刷了几千道算法题，这些我私藏的刷题网站都在这里了！: 遥想当年，机缘巧合入了 ACM 的坑，周边巨擘林立，从此过上了"天天被虐似死狗"的生活… 然而我是谁，我可是死狗中的战斗鸡，智力不够那刷题来凑，开始了夜以继日哼哧哼哧刷题的日子，从此"读题与提交齐飞， AC 与 WA 一色 "，我惊喜的发现被题虐既刺激又有快感，那一刻我泪流满面。这么好的事儿作为一个正直的人绝不能自己独享，经过激烈的颅内斗争，我决定把我私藏的十几个 T 的，阿不，十几个刷题网...

JavaScript 为什么能活到现在？: 作者 | 司徒正美责编 |郭芮出品 | CSDN（ID：CSDNnews） JavaScript能发展到现在的程度已经经历不少的坎坷，早产带来的某些缺陷是永久性的，因此浏览器才有禁用JavaScript的选项。甚至在jQuery时代有人问出这样的问题，jQuery与JavaScript哪个快？在Babel.js出来之前，发明一门全新的语言代码代替JavaScript...

项目中的if else太多了，该怎么重构？: 介绍最近跟着公司的大佬开发了一款IM系统，类似QQ和微信哈，就是聊天软件。我们有一部分业务逻辑是这样的 if (msgType = "文本") { // dosomething } else if(msgType = "图片") { // doshomething } else if(msgType = "视频") { // doshomething } else { // doshom...

Nginx 原理和架构: Nginx 是一个免费的，开源的，高性能的 HTTP 服务器和反向代理，以及 IMAP / POP3 代理服务器。Nginx 以其高性能，稳定性，丰富的功能，简单的配置和低资源消耗而闻名。 Nginx 的整体架构 Nginx 里有一个 master 进程和多个 worker 进程。master 进程并不处理网络请求，主要负责调度工作进程：加载配置、启动工作进程及非停升级。worker 进程负责处...

致 Python 初学者: 欢迎来到“Python进阶”专栏！来到这里的每一位同学，应该大致上学习了很多 Python 的基础知识，正在努力成长的过程中。在此期间，一定遇到了很多的困惑，对未来的学习方向感到迷茫。我非常理解你们所面临的处境。我从2007年开始接触 python 这门编程语言，从2009年开始单一使用 python 应对所有的开发工作，直至今天。回顾自己的学习过程，也曾经遇到过无数的困难，也曾经迷茫过、困惑过。开办这个专栏，正是为了帮助像我当年一样困惑的 Python 初学者走出困境、快速成长。希望我的经验能真正帮到你

Python 编程开发实用经验和技巧: Python是一门很灵活的语言，也有很多实用的方法，有时候实现一个功能可以用多种方法实现，我这里总结了一些常用的方法和技巧，包括小数保留指定位小数、判断变量的数据类型、类方法@classmethod、制表符中文对齐、遍历字典、datetime.timedelta的使用等，会持续更新......

吐血推荐珍藏的Visual Studio Code插件: 作为一名Java工程师，由于工作需要，最近一个月一直在写NodeJS，这种经历可以说是一部辛酸史了。好在有神器Visual Studio Code陪伴，让我的这段经历没有更加困难。眼看这段经历要告一段落了，今天就来给大家分享一下我常用的一些VSC的插件。 VSC的插件安装方法很简单，只需要点击左侧最下方的插件栏选项，然后就可以搜索你想要的插件了。下面我们进入正题 Material Theme ...

“狗屁不通文章生成器”登顶GitHub热榜，分分钟写出万字形式主义大作: 一、垃圾文字生成器介绍最近在浏览GitHub的时候，发现了这样一个骨骼清奇的雷人项目，而且热度还特别高。项目中文名：狗屁不通文章生成器项目英文名：BullshitGenerator 根据作者的介绍，他是偶尔需要一些中文文字用于GUI开发时测试文本渲染，因此开发了这个废话生成器。但由于生成的废话实在是太过富于哲理，所以最近已经被小伙伴们给玩坏了。他的文风可能是这样的：你发现，...

程序员：我终于知道post和get的区别: 是一个老生常谈的话题，然而随着不断的学习，对于以前的认识有很多误区，所以还是需要不断地总结的，学而时习之，不亦说乎

《程序人生》系列-这个程序员只用了20行代码就拿了冠军: 你知道的越多，你不知道的越多点赞再看，养成习惯GitHub上已经开源https://github.com/JavaFamily，有一线大厂面试点脑图，欢迎Star和完善前言这一期不算《吊打面试官》系列的，所有没前言我直接开始。絮叨本来应该是没有这期的，看过我上期的小伙伴应该是知道的嘛，双十一比较忙嘛，要值班又要去帮忙拍摄年会的视频素材，还得搞个程序员一天的Vlog，还要写BU...

开源并不是你认为的那些事: 点击上方蓝字关注我们开源之道导读所以 ————想要理清开源是什么？先要厘清开源不是什么，名正言顺是句中国的古代成语，概念本身的理解非常之重要。大部分生物多样性的起源，...

加快推动区块链技术和产业创新发展，2019可信区块链峰会在京召开: 11月8日，由中国信息通信研究院、中国通信标准化协会、中国互联网协会、可信区块链推进计划联合主办，科技行者协办的2019可信区块链峰会将在北京悠唐皇冠假日酒店开幕。　　区块链技术被认为是继蒸汽机、电力、互联网之后，下一代颠覆性的核心技术。如果说蒸汽机释放了人类的生产力，电力解决了人类基本的生活需求，互联网彻底改变了信息传递的方式，区块链作为构造信任的技术有重要的价值。　　1...