|
@@ -104,7 +104,8 @@ const chartDefaultOpts={
|
|
|
}
|
|
|
|
|
|
const props = defineProps({
|
|
|
- options: Object
|
|
|
+ options: Object,
|
|
|
+ chartInfo: Object
|
|
|
})
|
|
|
import {ref,onMounted,watch,toRefs } from 'vue'
|
|
|
import Highcharts from 'highcharts/highstock';
|
|
@@ -112,12 +113,16 @@ import HighchartszhCN from '../../utils/highcahrts-zh_CN.js'
|
|
|
HighchartszhCN(Highcharts)
|
|
|
let chartIns=ref(null)// 图表实例
|
|
|
onMounted(() => {
|
|
|
- let obj={...chartDefaultOpts,...props.options}
|
|
|
+ let themeOptions = setThemeOptions();
|
|
|
+
|
|
|
+ console.log(themeOptions)
|
|
|
+
|
|
|
+ let obj={...chartDefaultOpts,...themeOptions,...props.options}
|
|
|
console.log(obj);
|
|
|
|
|
|
//stock不支持线形图只支持时间图 某些用chart
|
|
|
let is_linear = props.options.series
|
|
|
- ? props.options.series.every(_ => _.type === 'scatter') || props.options.series.some(_ => _.chartType === 'linear')
|
|
|
+ ? props.options.series.some(_ => _.chartType === 'linear')
|
|
|
: false ;
|
|
|
chartIns.value = is_linear ? Highcharts.chart("chart-box",obj) : Highcharts.stockChart("chart-box",obj);
|
|
|
})
|
|
@@ -134,12 +139,34 @@ const clickChartTopLabel=index=>{
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ //主题色一些外层公用配置 目前只有绘图区和legend和colors
|
|
|
+const setThemeOptions = () => {
|
|
|
+
|
|
|
+ if(!props.chartInfo.ChartThemeStyle) return {}
|
|
|
+
|
|
|
+ let chartTheme = JSON.parse(props.chartInfo.ChartThemeStyle)
|
|
|
+ return {
|
|
|
+ legend: {
|
|
|
+ ...chartDefaultOpts.legend,
|
|
|
+ ...chartTheme.legendOptions
|
|
|
+ },
|
|
|
+ chart: {
|
|
|
+ ...chartDefaultOpts.chart,
|
|
|
+ ...chartTheme.drawOption
|
|
|
+ },
|
|
|
+ colors: chartTheme.colorsOptions
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
watch(
|
|
|
()=>props.options,
|
|
|
(nval)=>{
|
|
|
console.log('重绘');
|
|
|
+
|
|
|
+ let themeOptions = setThemeOptions();
|
|
|
+
|
|
|
let obj={}
|
|
|
- obj={...chartDefaultOpts,...props.options}
|
|
|
+ obj={...chartDefaultOpts,...themeOptions,...props.options}
|
|
|
console.log(obj);
|
|
|
// update: function (options, redraw, oneToOne, animation)
|
|
|
// chartIns.value.update(obj,true)
|