ZeyZhang commented on issue #10603: angular项目中如何使用自定义的主题？ URL: https://github.com/apache/incubator-echarts/issues/10603#issuecomment-498579437 我原生的html页面使用自定义主题依然无法生效，自定义主题是通过官网主题构建工具导出的。 不知道是不是我用法有误 `<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> </head> <body> <div id="box" style="width: 500px;height:500px"></div> </body> <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.js";></script> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 echarts.registerTheme("custome", { version: 1, themeName: "dark", theme: { seriesCnt: "4", backgroundColor: "#122a29", titleColor: "#eeeeee", subtitleColor: "#aaa", textColorShow: false, textColor: "#333", markTextColor: "#eee", color: [ "#dd6b66", "#759aa0", "#e69d87", "#8dc1a9", "#ea7e53", "#eedd78", "#73a373", "#73b9bc", "#7289ab", "#91ca8c", "#f49f42" ], borderColor: "#ccc", borderWidth: 0, visualMapColor: ["#bf444c", "#d88273", "#f6efa6"], legendTextColor: "#eeeeee", kColor: "#fd1050", kColor0: "#0cf49b", kBorderColor: "#fd1050", kBorderColor0: "#0cf49b", kBorderWidth: 1, lineWidth: 2, symbolSize: 4, symbol: "circle", symbolBorderWidth: 1, lineSmooth: false, graphLineWidth: 1, graphLineColor: "#aaa", mapLabelColor: "#000", mapLabelColorE: "rgb(100,0,0)", mapBorderColor: "#444", mapBorderColorE: "#444", mapBorderWidth: 0.5, mapBorderWidthE: 1, mapAreaColor: "#eee", mapAreaColorE: "rgba(255,215,0,0.8)", axes: [ { type: "all", name: "通用坐标轴", axisLineShow: true, axisLineColor: "#eeeeee", axisTickShow: true, axisTickColor: "#eeeeee", axisLabelShow: true, axisLabelColor: "#eeeeee", splitLineShow: true, splitLineColor: ["#aaaaaa"], splitAreaShow: false, splitAreaColor: ["#eeeeee"] }, { type: "category", name: "类目坐标轴", axisLineShow: true, axisLineColor: "#333", axisTickShow: true, axisTickColor: "#333", axisLabelShow: true, axisLabelColor: "#333", splitLineShow: false, splitLineColor: ["#ccc"], splitAreaShow: false, splitAreaColor: ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"] }, { type: "value", name: "数值坐标轴", axisLineShow: true, axisLineColor: "#333", axisTickShow: true, axisTickColor: "#333", axisLabelShow: true, axisLabelColor: "#333", splitLineShow: true, splitLineColor: ["#ccc"], splitAreaShow: false, splitAreaColor: ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"] }, { type: "log", name: "对数坐标轴", axisLineShow: true, axisLineColor: "#333", axisTickShow: true, axisTickColor: "#333", axisLabelShow: true, axisLabelColor: "#333", splitLineShow: true, splitLineColor: ["#ccc"], splitAreaShow: false, splitAreaColor: ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"] }, { type: "time", name: "时间坐标轴", axisLineShow: true, axisLineColor: "#333", axisTickShow: true, axisTickColor: "#333", axisLabelShow: true, axisLabelColor: "#333", splitLineShow: true, splitLineColor: ["#ccc"], splitAreaShow: false, splitAreaColor: ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"] } ], axisSeperateSetting: false, toolboxColor: "#dddddd", toolboxEmpasisColor: "#4f9d61", tooltipAxisColor: "#eeeeee", tooltipAxisWidth: "1", timelineLineColor: "#eeeeee", timelineLineWidth: 1, timelineItemColor: "#dd6b66", timelineItemColorE: "#a9334c", timelineCheckColor: "#e43c59", timelineCheckBorderColor: "rgba(194,53,49, 0.5)", timelineItemBorderWidth: 1, timelineControlColor: "#eeeeee", timelineControlBorderColor: "#eeeeee", timelineControlBorderWidth: 0.5, timelineLabelColor: "#eeeeee", datazoomBackgroundColor: "rgba(47,69,84,0)", datazoomDataColor: "rgba(255,255,255,0.3)", datazoomFillColor: "rgba(167,183,204,0.4)", datazoomHandleColor: "#a7b7cc", datazoomHandleWidth: "100", datazoomLabelColor: "#eeeeee" } }); var myChart = echarts.init(document.getElementById("box"), "custome"); var option = { title: { text: "ECharts 入门示例" }, tooltip: {}, legend: { data: ["销量"] }, xAxis: { data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"] }, yAxis: {}, series: [ { name: "销量", type: "bar", data: [5, 20, 36, 10, 10, 20] } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </html> `
---------------------------------------------------------------- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. For queries about this service, please contact Infrastructure at: [email protected] With regards, Apache Git Services --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
