echarts-theme v0.2.6

echarts-theme

要求两种主题切换变色,这好做啊\ 但是图表也要跟着变色,这就很烦了,所以只能封装一个包\ 我只想摸鱼啊,可恶

配置属性

DemoData:

options: {
     tooltip: {
       trigger: 'axis'
     },
     xAxis: {
       type: 'category',
       data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
     },
     yAxis: {
       type: 'value'
     },
     series: [{
       data: [150, 230, 224, 218, 135, 147, 260],
       type: 'line'
     }]
},
colorX: '#71747E',
colorY: '#9CA5AC',
splitLineX: '#e0e6f1',
splitLineY: '#e0e6f1',
boxShadow:[{
 'bottom': '#FFFFFF',
 'top': '#dedcfd',
}]
optionsW:{
    colorX: '#71747E',
    colorY: '#9CA5AC',
    splitLineX: '#e0e6f1',
    splitLineY: '#e0e6f1',
    legendColor: '#834f63',
    boxShadow:[{
      'bottom': '#FFFFFF',
      'top': '#dedcfd',
    }]
},
optionsB:{
    colorX: '#4e06ff',
    colorY: '#23fffd',
    splitLineX: '#4df14c',
    splitLineY: '#f1224b',
    legendColor: '#7ffdff',
    boxShadow:[{
      'bottom': '#ff2df1',
      'top': '#0afdf3',
    }]
}
modeFlag: true

安装使用

下载

npm install echarts-theme

引入main.js

import EchartsTheme from 'echarts-theme'

app.use(EchartsTheme).mount('#app');

使用

在template中引入,注意一定要父级容器,这里我设置的是500*500的

<div style="width:500px;height:500px">
    <echarts-theme :echartsId="'searchEcharts'"
                    :eWidth="'100%'"
                    :eHeight="'100%'"
                    :theme="themeFlag"
                    :optionsW="optionsW"
                    :optionsB="optionsB"
                    :modeFlag="modeFlag"
                    :options="eOptions"/>
</div>