平板电脑可以做网站吗,phpstudy,借助开源系统快速建实用网站,开发工具箱先下载ucharts H5示例源码#xff1a;
uCharts: 高性能跨平台图表库#xff0c;支持H5、APP、小程序#xff08;微信小程序、支付宝小程序、钉钉小程序、百度小程序、头条小程序、QQ小程序、快手小程序、360小程序#xff09;、Vue、Taro等更多支持canvas的框架平台#…先下载ucharts H5示例源码
uCharts: 高性能跨平台图表库支持H5、APP、小程序微信小程序、支付宝小程序、钉钉小程序、百度小程序、头条小程序、QQ小程序、快手小程序、360小程序、Vue、Taro等更多支持canvas的框架平台支持饼图、圆环图、线图、柱状图、山峰图、区域图、雷达图、圆弧进度图、仪表盘、K线图、条状图、混合图、玫瑰图、漏斗图、词云图、时序图、散点图、气泡图、地图等常见图表。
官方示例案例H5
1. 下载之后可以直接用Webstorm打开此位置的示例项目移动端的H5的项目 2. 启动之后创建一个运行实例 3. 如上图启动之后点击左正解的浏览地址看效果 运行效果首页
根据项目需要H5, Echarts配置可以 对应点的案例源码
templateview classcontent!-- config-echarts.js中的seriesTemplate为option.series模板可以作为series中的默认配置:chartData.series中的配置如果有相同的会覆盖掉 seriesTemplate 中的配置 --qiun-title-bar title柱状图动态更新数据 /view classcharts-box!-- 如果发布到二级或者多级目录中需要配置 directory 属性 --!-- qiun-data-charts typecolumn :chartDatachartsDataColumn1 :echartsH5true :echartsApptrue directory/h5/ completecomplete/ --qiun-data-charts typecolumn :chartDatachartsDataColumn1 :echartsH5true :echartsApptrue completecomplete//viewqiun-title-bar title堆叠柱状图点击获取索引 /view classcharts-box!-- 注意这里的opts是uCharts的配置eopts是ECharts的配置不要搞混如果不需要用在各种小程序端是不需要传uCharts的opts的只需要传eopts即可 --qiun-data-charts typecolumn :opts{extra:{column:{type:stack}}} :eopts{xAxis:{axisLabel:{color:#FF0000}}} :chartDatachartsDataColumn2 :echartsH5true :echartsApptrue getIndexgetIndex//viewqiun-title-bar title柱状图渐变色 /view classcharts-boxqiun-data-charts typecolumn :chartDatachartsDataColumn3 :echartsH5true :echartsApptrue//viewqiun-title-bar title圆角柱状图 /view classcharts-box!-- 此处改变的是 seriesTemplate 模板中的默认配置不必每个series都传itemStyle将会覆盖:chartData.series 实现更低的代码量 --qiun-data-charts typecolumn :eopts{seriesTemplate:{itemStyle:{normal:{barBorderRadius:[30, 30, 0, 0]}}}} :chartDatachartsDataColumn4 :echartsH5true :echartsApptrue//viewqiun-title-bar title横向柱状图(仅ECharts) /view classcharts-boxqiun-data-charts typecolumn :eoptscolumneopts :chartDatachartsDataColumn5 :echartsH5true :echartsApptrue//viewqiun-title-bar title折线图 /view classcharts-boxqiun-data-charts typeline :chartDatachartsDataLine1 :echartsH5true :echartsApptrue//viewqiun-title-bar title曲线图 /view classcharts-box!-- 此处改变的是 seriesTemplate 模板中的默认配置不必每个series都传smooth:true将会覆盖:chartData.series 实现更低的代码量 --qiun-data-charts typeline :opts{extra:{line:{type:curve}}} :eopts{seriesTemplate:{smooth:true}} :chartDatachartsDataLine1 :echartsH5true :echartsApptrue//viewqiun-title-bar title区域图 /view classcharts-boxqiun-data-charts typearea :eopts{seriesTemplate:{areaStyle:{opacity:0.2}}} :chartDatachartsDataLine2 :echartsH5true :echartsApptrue//viewqiun-title-bar title渐变色区域图 /view classcharts-box!-- 注意这里的opts是uCharts的配置eopts是ECharts的配置不要搞混如果不需要用在各种小程序端是不需要传uCharts的opts的只需要传eopts即可这里加opts是为了覆盖uCharts的rose图的默认图例配置的位置 --qiun-data-charts typearea :opts{yAxis:{data:[{min:0}]},extra:{area:{type:curve,addLine:true,gradient:true}}} :chartDatachartsDataLine3 :echartsH5true :echartsApptrue//viewqiun-title-bar title饼图 /view classcharts-boxqiun-data-charts typepie :chartDatachartsDataPie1 :echartsH5true :echartsApptrue//viewqiun-title-bar title环形图动态更新option/view classcharts-box!-- 演示动态改变eopts --qiun-data-charts typering :opts{legend:{position:bottom}} :eoptsringOpts :chartDatachartsDataPie2 :echartsH5true :echartsApptrue//viewqiun-title-bar title面积玫瑰图/view classcharts-box!-- 注意这里的opts是uCharts的配置eopts是ECharts的配置不要搞混如果不需要用在各种小程序端是不需要传uCharts的opts的只需要传eopts即可这里加opts是为了覆盖uCharts的rose图的默认图例配置的位置 --qiun-data-charts typerose :opts{legend:{position:bottom}} :chartDatachartsDataPie3 :echartsH5true :echartsApptrue//viewqiun-title-bar title漏斗图/view classcharts-boxqiun-data-charts typefunnel :chartDatachartsDataPie4 :echartsH5true :echartsApptrue//view/view
/templatescript
//下面是演示数据您的项目不需要引用数据需要您从服务器自行获取
import demodata from /mockdata/demodata.json;export default {data() {return {chartsDataColumn1:{},chartsDataColumn2: {},chartsDataColumn3:{},chartsDataColumn4:{},chartsDataColumn5:{},chartsDataPie1: {},chartsDataPie2: {},chartsDataPie3: {},chartsDataPie4: {},chartsDataLine1: {},chartsDataLine2: {},chartsDataLine3: {},ringOpts:{},//横向柱状图的配置您也可以把默认配置写在config-echarts.js中columneopts:{grid: {left: 3%,right: 4%,bottom: 30,top:10,containLabel: true},xAxis: {type: value,boundaryGap: [0, 0.01],axisLine: {show: false},axisTick: {show: false}},yAxis: {type: category,data: []},//series模板会覆盖至chartData中的series中的每一个数组内seriesTemplate:{label: {show: true,color: #666666,position: right,},}}};},onReady() {setTimeout(() {//1. 获取数据this.getServerData();}, 1000);//演示变更数据后显示loading状态如果不想展示loading状态则不需要此步可以注释掉看效果setTimeout(() {this.chartsDataColumn1.series[];}, 4000);setTimeout(() {//2. 模拟新的柱状图this.chartsDataColumn1JSON.parse(JSON.stringify(demodata.Line));//测试动态绑定的eoptsthis.ringOpts{color:[#FF00FF,#AAFF11],legend:{show:false}}}, 5000);},methods: {getServerData() {//因部分数据格式一样这里不同图表引用同一数据源的话需要深拷贝一下构造不同的对象//开发者需要自行处理服务器返回的数据应与标准数据格式一致注意series的data数值应为数字格式this.chartsDataColumn1JSON.parse(JSON.stringify(demodata.Column));let tmpColumn3JSON.parse(JSON.stringify(demodata.Column));//series.linearGradient代表渐变色//前4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始//第5个参数为数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置tmpColumn3.series[0].linearGradient[0, 0, 0, 1,[{offset: 0, color: #0EE2F8},{offset: 1, color: #1890FF}]];tmpColumn3.series[1].linearGradient[0, 0, 0, 1,[{offset: 0, color: #2BDCA8},{offset: 1, color: #91CB74}]];this.chartsDataColumn3tmpColumn3;this.chartsDataColumn4JSON.parse(JSON.stringify(demodata.Column));this.chartsDataColumn5JSON.parse(JSON.stringify(demodata.Column));this.chartsDataPie1JSON.parse(JSON.stringify(demodata.PieA))this.chartsDataPie2JSON.parse(JSON.stringify(demodata.PieA))this.chartsDataPie3JSON.parse(JSON.stringify(demodata.PieA))this.chartsDataPie4JSON.parse(JSON.stringify(demodata.PieA))this.chartsDataLine1JSON.parse(JSON.stringify(demodata.Line))//处理堆叠柱状图的serieslet duidie JSON.parse(JSON.stringify(demodata.Column))for (var i 0; i duidie.series.length; i) {duidie.series[i].stack oneduidie.series[i].barWidth 50%duidie.series[i].label {position: inside,color:#FFFFFF}}//这里需要注意一定要定义一个临时的变量再统一赋值给chartData否则chartData具有监听属性只要有变化就会导致重新渲染this.chartsDataColumn2duidielet areadata JSON.parse(JSON.stringify(demodata.Line))areadata.series areadata.series.reverse()this.chartsDataLine2areadata//渐变色区域图let linearareadata{categories: [2016, 2017, 2018, 2019, 2020, 2021],series:[{name: 成交量A,smooth:true,areaStyle:{color: {type: linear,x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0, color: #1890FF // 0% 处的颜色}, {offset: 1, color: #FFFFFF // 100% 处的颜色}],global: false // 缺省为 false}},data: [100, 80, 95, 150, 112, 132]}]}this.chartsDataLine3linearareadata},complete(e) {console.log(渲染完成事件,e);},getIndex(e){console.log(获取点击索引事件,e);}}
};
/scriptstyle
.content {display: flex;flex-direction: column;flex: 1;
}.charts-box {width: 100%;height: 300px;
}
/style导入到自己的项目
1. 下载之后打开项目uniapp项目任意一个可以用Hbuilder创建一个。
2. 将下面所有的文件拷贝到【自己的项目】对应目录 3.即可直接使用。 其他形式的项目导入参考 1、请将static目录下文件复制到根目录的static文件夹下 2、qiun-title-bar文件夹可删除 3、其他的都不要动直接原样复制到您项目中的components目录 打开下载的项目,找到公司对应的项目形式用uni_modules,或者用node_modules的每个都有单独的用于离线导入的库。
